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getting started 

WordPress from scratch 

You’ve got something to say. 

Whether it’s just you and your desire to let everyone know about your growing 
collection of hand-crocheted Star Wars figures, or a big company with 
hundreds of products, blogging let’s anyone publish online without having 
to be a genius about HTML, CSS, or any other programming. In this chapter, 
you’ll learn how to get hosting for your blog, install WordPress, and create 
and publish your first blog post. 
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changing your blogs look and feel 



A question of style 

You’ve finally got your own blog. But it looks so...generic. 

Time to make it your own. Word Press comes preloaded with lots of themes you can 
apply to your blog, but we’re going to go one step further and make our own custom 
theme. Along the way, you’ll learn some basic HTML and CSS to really make your blog 
look exactly how you want. We’ll also delve into CSS rules, which allow you to quickly 
change how your blog looks, and take advantage of Word Press widgets to easily add 
sidebar content to the blog.. 


A tale of two sites 44 

The Acme Bit Company home page 45 

Anatomy of a WordPress theme 51 

WordPress themes are a collection of template files... 52 

... all working in concert 53 

PHP is the logic behind your theme 54 
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Rules do a lot of work for you 
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content management with wordpress 

Beyond the blog 


You’re starting to outgrow the blog. 

Maybe your business is growing, maybe you need more control of what shows up 
where on your blog, and when. Luckily, Word Press handles a lot more than just 
chronological blog posts. Well start to tap into its content management system 
capabilities by creating static pages like on a regular website, adding navigation for the 



new pages, and changing the home page of your new site so it isn’t your blog. Get ready 
to build a full-fledged website practically without writing a single line of HTML or CSS. 


WordPress is a content management system 92 

WordPress has three main management sections 93 
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Adding a new page is just like adding a new post 96 

Make your URLs manageable with permalinks 100 

Permalinks are handled by the web server 101 

Page Not Found? 102 


Minding your .htaccess file 


103 



Build your pages with the visual editor 

All pages are not created equal 
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No more blog... No more home page either? 
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users, categories, and tags 



Keeping things organized 

It’s time to invite some friends to the party. 

Blogging (or managing a Word Press site) doesn’t have to be a solitary venture. 
Loads of well-know blogs out there feature multiple user roles, from writers to 
editors and administrators. In this chapter, you’ll learn how to get multiple people 


We all use the same login 
because it’s easy—you never 
forget the password! 


posting on the same blog, manage the workflow across all those people, and put 
categories and tags to work in organizing your site’s content. 
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Video 肪 c[ plugins 

Getting things moving 

Video can add a whole other dimension to your blog. For nearly 

any kind of content, video makes your site more engaging, and gives you readers 
plenty more to comment on and share with their friends. In this chapter, you’ll learn 
how to host your videos online and include them (along with other downloadable 
files) in your blog posts. We’ll introduce plug-ins, which do a lot of heavy lifting (and 
coding) for you, and use categories to create a consistent, easy-to-find home for all 
the videos on your site. 





12 ] 


J 



a i^-H ■一 





m 




一二 

■ yisjr h'dKi im\ miu 1 


Adding video to Thanks for Mutton 
Host your videos outside WordPress 
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Upload your video to Vimeo 

Plug-ins make working with other web services easier 

Find a plug-in for almost anything in the Plug-in Directory 

Browse and install plug-ins from within WordPress 

Add additional content and files to your post 

Use the media gallery to attach other files 

Use categories to create a video section 

Use the “more” tag to clean up your home page 
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Spreading the word 

It’s time more people knew about your awesome site. 

Your blog is humming along, and you’ve already figured out how to expand Word Press to 
manage an entire website. Now that you’ve got video playing there too, why not expand 
your audience base? In this chapter, well discover how to distribute videos through 
Apple’s iTunes store as podcasts, and how to syndicate your content so that a ton more 
people will find out about your site (and keep coming back for more). 






The Thanks for Mutton podcast 

WordPress is your hub for content distribution 
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securing Wordpress 

Locking things down 

Not everyone on the Internet is nice. 

It’s a fact of modern life on the Internet: there are people who spend their time trying 
to break into, or hack, other people’s websites. Some do it just for the thrill, others 
to cause chaos, and some are simply after sensitive information like credit card 
numbers, social security numbers, and other personal information. Now, you’ll learn 
how to make your Word Press site more secure, with unique usernames, strong 
passwords, and more. You’ll also kick off automatic backups of all your Word Press 
files so you can restore your site if it ever does get hacked, or goes down for other 



Something’s not right here... 240 

You’ve been hacked 242 
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Time for the passing lane 

Speed is important online. 

A fast-loading site isn’t just about keeping visitors around. Yes, if your site doesn’t load 
quickly then people might just wander off, but a slow site also gets dinged in search results 
from the likes of Google, meaning fewer people will actually find your site in the first place. 


Beyond just increasing your horsepower, you’ll also learn how to use caching, database 



optimization, and additional hosting options to beef up your site to handle more traffic, too. 
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appendix ： leftovers 

Top ten things (we didn’t cover) 

We’ve really covered a lot of ground in this book. 

The thing is, there are some important topics and tidbits that didn’t quite fit into any 
of the previous chapters. We feel pretty strongly about this, and think that if we 
didn’t at least cover them in passing, we’d be doing you a disservice. That’s where 
this chapter comes into the picture. Well, it’s not really a chapter, it’s more like an 
appendix (OK, it is an appendix). But it’s an awesome appendix of the top ten best 
bits that we couldn't let you go without. 
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how to use this book 


Who is this book for? 

If you can answer “yes” to all of these: 

Are you familiar with blogs in general, or currently use 
Word Press to publish and manage blogs and websites? 

helps i-f you’ve dlireddy 

Are you familiar with the concepts of web hosting, file transfer ^ So s f ^ 

(FTP) and have a basic understanding of HTML and CSS?^/ L °^ s but its ^cv-taihly hot 
Do you want to learn how to build not just a blog, but a full- \ui\red- 
fledged Word Press site? 

Do you prefer stimulating dinner party conversation 
to dry, dull, academic lectures? 


① 

② 


this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any of these: 

(?) Are you completely new to blogging and how websites 
work? 

© Are you looking for a reference book on Word Press 
tools, plug-ins, and the like? 
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一 you rather have a root canal than mix stripes with 
plaid? Do you believe that a technical book can’t be 
serious if there’s a foodie blog in it? 


this book is not for you. 
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the intro 


Wc know what you're thmkmg. 


“How can this be a serious WordPress book?” 
“What’s with all the graphics?” 


“Can I actually learn it this way?” 

And we know what your brain h thmkmg. 







Your brain craves novelty. It’s always searching, scanning, waiting for 
something unusual. It was built that way，and it helps you stay alive. 


So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real]oh —— recording things that matter. It doesn’t bother saving 
the boring things; they never make it past the “this is obviously not 
important” filter. 


Just one problem. Your brain’s trying to do you a big favor. It’s trying 
to make sure that this obviously non-important content doesn’t clutter 
up scarce resources. Resources that are better spent storing the really 
big things. Like tigers. Like the danger of fire. Like how you should 
never again snowboard in shorts. 


And there’s no simple way to tell your brain, “Hey brain, thank you 
very much, but no matter how dull this book is, and how little I’m 
registering on the emotional Richter scale right now，I really do want 
you to keep this stuff around.” 


How does your brain know what’s important? Suppose you’re out for 
a day hike and a tiger jumps in front of you, what happens inside your 
head and body? 


Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows... 

This must be important! Don’t forget it! 

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free 
You’re studying. Getting ready for an exam. Or trying to learn some 
tough technical topic your boss thinks will take a week, ten days at 
the most. 


_ e . 

sa^- 


Great. Only 
350 more dull, 
dry, boring pages. 


you are here ► 
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latest research in cognitive sci ， w kno w what turns your brain on. 

,earn/ng takes a lot more than text on a page. We 
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the intro 


Metacognition: thinking about thinking 

If you really want to learn, and you want to learn more quickly and more deeply, 
pay attention to how you pay attention. Think about how you think. Learn how you 
learn. 

Most of us did not take courses on metacognition or learning theory when we were 
growing up. We were expected to learn, but rarely taught to learn. 

But we assume that if you’re holding this book, you really want to learn about 
WordPress. And you probably don’t want to spend a lot of time. And since you’re 
going to build more apps in the future, you need to remember what you read. And 
for that, you’ve got to understand it. To get the most from this book, or any book or 
learning experience, take responsibility for your brain. Your brain on this content. 

The trick is to get your brain to see the new material you’re learning 
as Really Important. Crucial to your well-being. As important as 
a tiger. Otherwise, you’re in for a constant battle, with your brain 
doing its best to keep the new content from sticking. 


So just how DO you get your brain to think that 
WordPress is a hungry tiger? 

There’s the slow, tedious way, or the faster, more effective way. 

The slow way is about sheer repetition. You obviously know that 
you are able to learn and remember even the dullest of topics 
if you keep pounding the same thing into your brain. With enough 
repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at the 
same thing over and over and over, so I suppose it must be.” 

The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 

More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 

A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 

But pictures and conversational style are just the beginning. 
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how to use this book 


Here's what WE did: 

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in the 
text somewhere. 

We used redundancy^ saying the same thing in different ways and with different media types, 
and multiple senses : to increase the chance that the content gets coded into more than one area 
of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor, surprise, oic interest. 

We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included loads of activities, because your brain is tuned to learn and remember more 
when you do things than when you read about things. And we made the exercises challenging- 
yet-do-able, because that’s what most people prefer. 

We used multiple learning styles, becausejoz/ might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, and someone else just wants to see 
an example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view ， 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it — you can’t get your body in shape just by watching people at the 
gym. But we did our best to make sure that when you’re working hard, it’s on the right things. 
Thsityou y re not spending one extra dendrite processing a hard-to-understand example, 
or parsing difficult, jargon-laden, or overly terse text. 

We people. In stories, examples, pictures, etc., because, well, because a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain mto submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

U ihis sii^k \i 

0h y° ulr 


(T) Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

( 2 ) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3) Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars —— they } re part of the core content! 

Don’t skip them. 

(4) Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

(5^ Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

(7^ Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

(Q^ Feel something! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

(9) Create something! 

Apply this to your daily work; use what you 
are learning to improve your own blog. Just do 
something to get some experience beyond the 
exercises and activities in this book. All you need 
is something to add to your blog, such that you’re 
applying the tools and techniques from the book to 
your site (or maybe a friend’s site!). 
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read me 


Read m 

This is a learning experience, not a reference book. We deliberately stripped out everything 
that might get in the way of learning whatever it is we’re working on at that point in the 
book. And the first time through, you need to begin at the beginning, because the book 
makes assumptions about what you’ve already seen and learned. 


We start off by installing WordPress and creating a real post in 
your first chapter. 

Believe it or not, even if you’ve never blogged or developed a website before, you can jump 
right in and starting blogging. You’ll also learn your way around the main interface used for 
WordPress. 


We don’t cover all the ins and outs of getting hosting for your blog 
in the book. 

In this book, you can get on with the business of learning how to create a full WordPress 
site (not just a blog) without all the complexity of hosting your blog on a hosting comany’s 
web server. But, we know that getting hosting (and making sure it is exactly what you need 
and set up properly) can be daunting, so we’ve put together a quick screencast with way 
more detail and information that you can find at www. headjirstlabs. com/WordPress. 

The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. Don } t skip the exercises. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books don’t 
have retention and recall as a goal, but this book is about learning, so you’ll see some of the 
same concepts come up more than once. 


The Brain Power exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning experience 
of the Brain Power activities is for you to decide if and when your answers are right. In 
some of the Brain Power exercises, you will find hints to point you in the right direction. 
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The technical review team 



For this book we had an amazing, elite group of tech reviewers. They did a fantastic job, and we’re really grateful for 
their incredible contribution. 

Co-author of Gates: How Microsoft’s Mogul Reinvented an Industry —— and Made Himself the Richest Man in America, career 
journalist Paul Andrews has been blogging for a decade and was an early adopter of WordPress. An avid cyclist, he 
writes a leading bike blog, Bikelntelligencer.com, dividing his time between Seattle and the San Francisco Bay Area 
with his wife Cecile and loyal but obstinate bichon frise, Maggie. 

Louis Rawlins works with media as an educator, artist, and engineer. The forests and city streets of his neighborhood 
inform his perception of media and advertising which he shares through dialogue and community. He lives and works 
in Oakland, California.. 

As a web designer, teacher and speaker, Jim Doran loves open source technologies and web standards. He’s currently a 
software engineer at Johns Hopkins University and a faculty member at the Community College of Baltimore County. 
When not hacking WordPress, Jim rides skateboards and makes art which he publishes at http://jimdoran.net. 

Ken Walker has been passionate about building easy-to-use technology since he first learned how to type. He holds a 
bachelors degree in computer science from Rutgers University and works at a financial services firm in New York City. 
In the brief moments he’s not working or raising his beautiful family — and probably should be sleeping — Ken shares 
the stories of the people who are making an impact in his hometown at www. dailynewarker. com. 
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Safari© Pooks Online 


Safari "》 

Books Online 


Safari Books Online is an on-demand digital library that lets you easily 
search over 7,500 technology and creative reference books and videos to 
find the answers you need quickly. 


With a subscription, you can read any page and watch any video from our library online. 
Read books on your cell phone and mobile devices. Access new titles before they are available 
for print, and get exclusive access to manuscripts in development and post feedback for the 
authors. Copy and paste code samples, organize your favorites, download chapters, bookmark 
key sections, create notes, print out pages, and benefit from tons of other time-saving features. 


O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital 
access to this book and others on similar topics from O’Reilly and other publishers, sign up for 
free at http:/ / my. safaribooksonline. com/?portal—oreilly. 
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getting started 

參 WordPress from scratch ♦ 



You know, I sure enjoy these 
made from scratch blogs... 




You’ve got something to say. 

Whether it’s just you and your desire to let everyone know about your growing collection 
of hand-crocheted Star Wars figures, or a big company with hundreds of products, 
blogging let’s anyone publish online without having to be a genius about HTML, CSS, 
or any other programming. In this chapter, you’ll learn how to get hosting for your blog, 
install WordPress, and create and publish your first blog post. 


this is a new chapter 




web publishing 


Web publishing for the masses 

With your own WordPress blog, you can easily —— and for free —— publish 
your own writing, pictures, movies, and even software. Before we dive 
in to getting WordPress installed and set up, let’s take a look at an 
example to see what a real live blog looks like: 
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getting started 


How WordPrcss works: the 30,000-foot view 

WordPress is all about the browser. You don’t need to install anything on your own 
actual computer~you do everything on another computer (called a web server, more 
on that in a minute) that you access over the Internet using your browser. You create 
your posts and manage all your WordPress files and settings through a browser, and 
on the other end, WordPress creates your blog as a collection of web pages that other 
people can view in their browsers, too. 
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at your web service 

The lifecycle of a WordPress blog post 

So we said that WordPress is installed on a web server. A web server is simply another 
computer somewhere that you can access over the Internet. At its most simplest, a web 
server delivers web pages to other computers over the Internet. But most servers also 
allow you to store/upload files, run programming scripts, and even allow other people 
(your site visitors) to contribute content as well (such as comments on your blog). 
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... and over Kere, someone is typing 
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These two parts —— creating the blog and someone 
viewing the blog — happen asynchronously. That is, they 
don’t necessarily happen at the same time. You create 
and publish your blog, and someone might come read 
it minutes, hours, or days later. In the middle of it all is 
the web server, which acts both as host for your blog’s 
files, and as the mechanism that serves it all up to 
anyone who wants to read your blog. 


www.headfirstlabs.com/archive.php 


Now let’s See it 


in action... 
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ready, set, blog 

The Acme Pit and Pixel Company 
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Hey I really need your 
help! I want to start a 
blog but doiVt even have 
the time to figure out 
where to begin... 



TV^'is is i\\t h^t Bit V^omc fajc 







Acme Pit needs a blog, stat! 

Acme Bit and Pixel has a basic website, but your friend Jay — the VP 
of Engineering — is also a big mover and shaker in the industry. He 
wants a way to share his neverending stream of ideas, and maybe 
even publish videos of his conference keynotes and lectures. He 
really wants a blog, but he’s too swamped coming up with new Bits 
to do it himself. He’s offered to pay you, so do you think you could 
help him out? 


Before Jay can start Hogging, we 
need to get WordPress Set up. 
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getting started 


download WordPrcss 

WordPress is free, open source software, meaning the code that runs it is freely 
available for anyone to download, install, and modify — it’s one of the reasosns 
WordPress is so powerful. There are no paid licenses, fees, or “boxed copies” of the 
software. To get WordPress, you simply download it from their website, install it, and 
run it on a web server. (Don’t worry, we’ll explain the web server part in a minute.) 




Point your browser at: 

http:/ / wordpress.org/download 


❺ 

❺ 


o 


Click the main download button. The WordPress 
ZIP file should download to your computer. 



Find the downloaded ZIP file and double click it 
to unpack the contents. WordPress is now ready to 
be configured and uploaded to your hosting server. 
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Don’t worry about hosting or servers 


We will cover all that a little later and help you get going with WordPress’s 5-minute 
install. If you have web hosting already ， great! Just hang tight and we’ll help you set it 
up in just a minute. 
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wordpress installation checklist 


The "famous" 5-miwutG WordPrcss Install© 


There are two ways in install WordPress: The first is manually, by setting up a database, 
uploading the files and running through the install process step-by-step. Your other option is 
to use a “One-click Install” offered at many of the prefered hosting companies recommended 
by WordPress. These are automated processes that do all the necessary steps for you and email 
you when your blog is ready for use. They’re quick, easy and alomst never fail. The problem 
is, you’re not really learning what’s going on under the hood —— and the engine that runs 
WordPress is important. So, if you’re in a hurry, go ahead and do the One Click Install. But 
we encourage you to stick around and install WordPress from scratch —— at least once —— so you 
can learn about all the cool stuff that make WordPress possible. 
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To install WordPrcss from scratch, start 
with the rcadme.html 
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Installation: Famous 5-minute install 
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2 - Complc-tc doh-Pig.php 
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getting started 



Wait! I still don’t get WHAT we are 
installing WordPress on. I thought you 
said I don’t have to download anything 
on my computer—and what is this web 
server you keep talking about? 


Use a web hosting company for your web server 

Don’t worry, this isn’t as scary as it sounds. You just downloaded WordPress 
so you’ll have all the files that you need to put up on your web server. There 
are thousands of companies out there that offer hosting on a web server, and 
you can get space on a server for less than a few trips to Starbuzz Coffee 
each month. We’re going to use MediaTemple because they are one of the 
recommended hosting providers for WordPress. You can use any host you 
want, just make sure that they support WordPress. You should be able to find 
an FAQ or section on their website that lists support for blogging and content 
management systems. 




-bWis book >/\ll use Media 

Temple ^\d (V^Uf// 

media 七 cwplc •於 

心 r all sevvev ay>a database 

samples. ttoY/cvcv, tjat 

su^o^rb lA/ovdPvcss Will v/ovk just 

-f me* 



| Pfcf. {^H 

■ . nun 


ai BoflU 

lapia^—.gv 

■■ihh m _! 

fc n*4P#HI 1 

HMH* b Ife'ftAI 

HLjB ra u^hi 

flnii ■ ■ 





/Vled'id Tc—c ovcvk'ill 

^ov- v\ccds, 七 

瓜 s W 七 m”. • 七 ' 

七 V^c same I -Cl'^k Install 七七 
Media Tcw^lc V^as. 


> 'Pil . I i 
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file transfer protocol 

Upload your WordPress files to the web server 

Now that we have hosting we can move on with this installation. Before we can go any 
further, you need to get the files you downloaded earlier up onto your hosted web server. 
They’re only on your computer right now so you can move them to the web server. 


Were -fco skip s 七 ep Z -Pov- 
now dome badk "to ’ 1 七 ov\Ct 
have ouv -Piles oy\ -the scv-vcv-. 


Start with aw FTP client 

FTP stands for File Transfer Protocol and it’s the easiest way 
to get files to a remote server — like a web server. Once you 
log in to the server through the FTP client, you can move files 
between your local computer and the web server, as if it were 
just another folder on your computer. 


/hs-ta|| 以 … 




Wpload Ales 匕 

^ Choose a hik 4, you, bloa 
^ Cht Walid <^i| address 


« n 


lEI 


Tripp f 


^ - 

■411 ^ 


I i ■曾 •■ ■■ ■ ■■- 


: l 


tsp'Wbfc 

S3 









p 

P] fiMd 

B| 

[j Sf¥ftri| 
f nQ^ii 
lEvinl 


All *tK*s lo^m 'm-fovmatio^ is dvdildble 
-fvom youV 3ddouir>*t y oulr 

y/eb Kos*t o( dKo'idC- ^ 


Pint J\ 


h 於 FTP die>vt is div-cd-tovy system, 
just like oy\ youv desk-top dompu-tev. 
li allows you -to dv-aj dv-op 
-files ix> -Pv-orw youv- web scv-vcv-. 


You V^avc -to I05 *m brfove you 
C^y\ ddd o\r \rCmoVC -f iles *fv-ow> 
youv- v/cb scv-vcv-. 
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getting started 


FTP client options 


There are plenty of free and paid FTP clients out there to choose from. 
Here are a few recommendations for both Windows and the Mac. 




transmit (Mac) 


Swart FTP (Windows 


L—h _________ — ■ 

1^9 B^HI ■ 麵： IDI^H 

一： ；| IT .: t I 養 每 % % I ' 游'叫 每蟲韵餘签參努麥链步褚痛黎 每缚包 i g . - . .*■ **^~ 飞 ^ . .^ ES I 麵 TT ，■ 

H ■——^ v^ini :: —iBQ ij I 1 f 

I • 一 ■ : _ ^ C 7 -.. ■: ■.:! VHHHHHK ^£^^3 •:' ■ ! ^ufnBr ^TBIiiiibmwm m »■ ■ iiiiiiiwr iMTiff **■•" 



bxenctSe 


Lets take one for a spin. Download and open up one of the above FTP clients, log in to your 
web server using the credentials supplied by your web host and upload all the files that you 
downloaded from Wordpress.org. Hint: make sure you upload the files to the “public” area on 
your server (you can find this from your host). 




■ -WT^^C 


n-Himmgi 
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exercise solution 





Download and open one of the above FTP clients, log in to your web server using the 
credentials supplied by your web host, and upload all the files that you downloaded from 
Wordpress.org. 


③ 


Drag and drop your WordPress files to the server. 

Depending on the FTP client you are using you should be able to drag all the 
files in the downloaded WordPress folder up to the public directory on your web 
server (this may vary depending on the host). 
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rtV-pJSf.php 
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wp-pu php 
n^s-FM.f.php 
wp |ihp 

wp UStkJS^Lff^p 
Dimirpc4rtifh 
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B html 
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Fn J 
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0y\ Media Tcmflc tV^c 
-foldcv located 
ms'idc ouv- domdm is 
y/Kcvc V/C v/a\r\*t *to dvof 
ouv- -files. 


Usually, \ y \ a spirt-view FTP dlic^-t 
七 he IcH side is youv lodal dompu-tev 
and "the v-ijh-t side is youv- web scv*vcv*. 


You W dv% Y ouV " 以 es ^ om dcsk-tof ov 
a^o-tV^cv- lota-tio^ ov\ youv- )iav-d dv-ivc d^cray 

•m 铋如 FTP dbt. TW»s VilUofY 如 V,lcs 

■to -tv^c v/cb sc\rvcv-. 
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getting started 


WordPrcss installation step 2: Configuration 


You should now be able to browse to your domain {www.yourblog. com) and 
see the screen below. This is the first step in getting a working blog up 
and running. 


v/ov-v-y i-f you do^i have a 

do 你 dm yet- Qn use "the 
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wt s*tc\>. 
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l/Vov-dPv-css v/ill help us. 




^ Choose a i，H c 4, youv . b| 
ahd Cht walid ^i| address 
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storing your stuff 

WordPrcss stores all your stuff m a database 

Every time we add content to WordPress, whether it’s a new post, page, theme, or comment, we are 
creating data that has to be stored somewhere. We can’t store this on our local computer because it 
has to be available to the Internet and WordPress 24/7. So, WordPress uses database software called 
MySQL, a free, open source (just like WordPress) database that is very popular among web-based 
applications. Because of its popularity, MySQL is already installed on almost every web host so you 
shouldn’t have to worry about it not being available. 




database is made 
up Jr tables *t^a*b V^old 'rov/s o-f 

data v-clatcd *to ou\r Wov-dPv"Css 

You have multiple 
oy\ *tV^c same sewev- -fov 
diWcv-cn-t sites airtd bloy. 


wp—comments 



wp—users 



l/Vheh a visi-toir loads a Oh 
you\r blog, WordPress pulls the 
do\nrcspohdihg iivfoirm^tioh -pv-orn the 

sehds -the 

七 ioh *to "tlitf w 产 h 






wp_posts 




wpjinks 


^|| you see 

•m WordPress dashboard a^d 
oy\ -tV^c live blo^ ov-i^ma-tcs -fv-om 
ouv" database. 
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getting started 


Create a new database from your hosting panel 

Don’t be intimidated by MySQL. For the most part you’ll have limited interaction with it and the 
installation process is the only time you need to mess with settings. To start, we need to log into our 
hosting panel and get the database set up. On Media Temple, that looks like this: 


Media Temple Control Panel 
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,|||S BBiivI fcmik BPi 

. 4| ,. 
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Evc\ry web host has Bv\ Ohl'rnc dohtv-ol 
J>3hcl v/hc\rc you dah log ih a^d 

广 〜 youir sites. fW wcVc lookih 3 
+o\r so^c-thihg dose -to u Mahagc 
Databases" o\r U /Wahagc MyS 少 L w 



Manage Dstabas&s 

Create, manage, and set permissions 
for your databases. 


_■■_■ p g p»| < N 

[ CMnpMBf ifniH 
iiSw raff^iBar 





U^dcr w Ma^ajc Databases } y/c 
tv"ca*tc y\cv/ MyS^L datBb^scs, add 
database users a^d fassv/ov-ds, a^d ass^n 
•those usev-s pcv-m*»ss*ior\s *to atdess ouv 
灼 cwly exc^td database. 


^hsrpen your pencil 


Log into your hosting panel (in our case, Media Temple) and 
locate the MySQL or Database options. Within that menu, add 
a new database called acme. You will also need to create a 
database user and grant them full access to the acme database. 
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sharpen solution 


^^rpen your pencil 

Solution 


Log into your hosting panel (in our case, Media Temple) and 
locate the MySQL or Database options. Within that menu, add a 
new database called acme. 


Create a new database for WordPress. 

Using the “add new database” functionality, create a new 
database to hold the Acme WordPress data. In Media 
Temple, they give us an automatic prefix. 



Miinjyg DaUbijjg^a 

Crodln, manociQ, and scl 邮她 slons 
frw yntu 




Add 


MySQL Con^lner 


Specify Your DatabajeName 


Hh 7 t 072 


Select DatibaieType 


MyiQl 5. L26 


rwijh-t be ethev- options -Pov- dd'tdbdse -type — 
make suve you dhoosc some vaviaiio^ o-f A/lyS^L.' 


❺ Create a new database user and password. 

We need a username and password to access our database. It’s a good idea to create 
a single user that only has access to a single database. This way we keep all our data 
secure and avoid confusion with multiple users and passwords. 


Add A D^yba^ell^r 

% 




Enlar Uaername 


E^t€f PasswmS 

Corfimi Passwwd 


db7i072_ 




I ? 降锘 



S ；： 

surc V ou a u^»<\uc database bloj. 


a u^'i<\ue database -fov- i\\t W<^. 
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Grant permissions to the new user. 

The last thing we have to do is give our new database user the appropriate permission to 
access the acme database. 




Take your new database for a spin. 

Just to make sure everything is up and running, choose 
u admin’’ and enter the username and password you just 
created. If the login is successful, you should see your 
database name in the left column. 



Ckk” ⑽ w Adm*m w Will take you 
■to {}\t lo^'m screen. 
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database details 


Almost there... 

Now that we have our database name, username and password, we’re ready to procede with the 
installation. The next screen has us filling in the database connection information so WordPress can 
build all the tables it needs. 


WordPress 
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□uEjibdip 


Vrtrdpirci-9- 


riki-mird 


□vuthlM hkHi 


TdJbli PrtfU 


pdiHiw^nEt 
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used *to fVCVCy>*t table ir>am*m^ 
dollisior>s i-f you or>ly V>3vc or>c 
database *to use. 



办 WORl>^R £SS 








tv\ you didk W Subm*i*t W 1/Vbv-dPv-CSS will 
无七 *to dvca*tc *tKc doyvf buva 七 IO 灼 
: (s*tcp #Z). TKeve is a ^ood dV>av>dc 

5 y/o^*t y/ov^k a 灼 d l/Vb\rdPv-CSS y/*ill jus 七 
；you *to dopy dy>d paste *mto *tKc 


l-f you sec -this sdv-cc^—log badk 
m "to youv- FTP dic>vt 扣 d dv-caic 

^ *f'lc 匕 dlled do^-Pij.php \y\ -the 
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getting started 


Every blog needs a title 


OK, it’s been a little longer than 5 minutes, but we’re just about done. The 
final step is to provide WordPress with a blog title — we’re using “Acme Bit 
Blog” for this project — a username and password for the administrative 
user (which you’ll use to log in to your dashboard), and an email address. 


youv blo^ a a 灼 d d.Koosc 

a usev-y>dme air>d passy/ovd -fov 


Click “Install WordPress” and you should be greeted with a success message. 



(^/)WordPress 


Success! 
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acmeadmin 

PiuiwQrd 
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high flying blog 


Pilot your blog with the WordPress dashboard 



The WordPress dashboard is the starting point for managing your blog and all 
its content. From here you can add posts, manage users, change options and 
install plug-ins —— all things we’ll be doing in the coming chapters. You can even 
automatically update WordPress when new versions of the software become 
available. This page will change over time as you add to the site. 
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uJJ I 屋 


tmwA, AwlI, »LD 

作 in hu ii itevi 甘 if ^AhsiidPmi Tmnwr mxwivl m 丨伸如、 

4r doni Urt -ifiHil lhntHi? 8 Hn la EJMr I 内 i 
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tq\^Akmu miiiad ChvtL k. Ttmi ipfx Nuntd 

p^jpanf up iiTU ngi T i mf l!P , | | 
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Dashb^ar J Up 
Cl^se 


TKc *tof y>av'i^d*b'ioy> youp deals v/rtK Cor\\ztA, 
or\ youv s*i*tc- H"cv*c you II -f md options *to 
dvca*tc y>ev/ posis, add l*mks, air>d upload 



The md'm PasKboavd 
y>avi^a-tior> *takcs you 
badk *to *tKc KomC 
ddskboav~d 
ar\d v/'ill also alcv-*t 
you y/hcir> you have 
so-f*tv/av*c upd3*tcs- 



ed'id- 


PGfitS 


Media 


Links 
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Fag® 


Comm^Dls 


TKc bo*t*tom y>av'i^a*tioir> 
y*ouf 'mdludes Imks *to 
Keif you may>a^c youv 
si-tc^s doy>-f i^uva*tioy>. Y® u 

ddv> add usevs, dKay>5« 

*tKc look dir>d (tt\, 3 r\d 


||S| Appearance 
0 Pl ugins 




Tl Tm15 


W 



there^cire no ^ 

Dumb Questi9ns 


What operating system does 
WordPress run on? 

WordPress doesn’t run on an 
operating system like you would expect 
of standard desktop software. Instead it 
runs on a “platform” 一 a collection of server 
and database software. This collection of 
software usually runs on a Linux operating 
systems, but Mac and Windows can also 
be used. It’s recommended that you run 
WordPress in a LAMP (Linux, Apache, 
MySQL, PHP) environment, a common 
platform on most webhosts. 


Media Temple is expensive. Do 
you have any other recommendations 
for hosting providers? 

If you don’t want to make the 
monthly commitment to Media Temple, 
there are lots of other options out there. 
Dreamhost (http://dreamhost.com) gives 
you massive amounts of space and 
bandwidth at a very inexpensive rate. 
There are also free options but you may 
have very little control over your server 
and software. Just remember to select a 
host that supports WordPress. 


Can’t I just run WordPress on my 
home computer? 

Actually, you can! We don’t 
recommend you host WordPress on 
your computer but you can set up a 
development environment on your local 
machine so you don’t have to set up 
your site live on the Internet. There’s too 
many steps to list here, but check out the 
appendix for more info. 
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time to start posting 


Create your first blog post 

Your friend Jay has sent over the first post he 
wants up on the site. Now that the installation is 
complete we’re ready to start adding content to 
our blog, (soon you’ll be able to set Jay up to post 
on his own, but for now we’ll get things started 
for him). 



Edit 

Add New 

C^ltQDTitS 

Post Tags 
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Thc\rc a\rc -two W cdi-tovs W inside o( 
WordP^ss ： l/isual ahd _L U - 
U /Wa\rkup w cdi-to\r). The Visual edi-to 
is the default — it’s whc\rc you dv-c^ 
the dohtch-t -Po\r youv post, a^d 
looks a lot like rwost wo\rd pvodcssu 
so^twairc. Take a look at the ttT/W 
edi-tov as well—what do you hotidc 
the ma\y\ di-p-fc\rchdcs between -I 

tv/o optiohS? 
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+ 






Match each new post page element to its function within WordPress. 


rosl Tibs 

Add new ti 勾 Ad 乜 

Sepurjic 邮 s with cammm 

Choose frop-the vioat used tags n Post Tags 


b 

/ 

link 





Catf>gGfhp^ 

All Categories Mq^I Used 
i^l Unfacegorized 


Atffl Htvt Catfrgcrv 


I allow you to add HTML tags to your 
pages and posts. 


I can help you organize content and 
information within your site. I’m also 
a snapshot of the contents of a post. 


I’m in the Visual Editor and help you 
modify the way text looks. 


Adding content to me displays 
alternate text or a teaser on the home 
page of the blog. 


I can help you organize posts into 
large “buckets” and give you the 
ability to customize your site based on 
my content. 
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whafs my purpose solution 





離 V — U 費，乜 《 擊，- 


Match each new post page element to its function within WordPress. 



I allow you to add HTML tags to your 
pages and posts. 


I can help you organize content and 
information within your site. I’m also 
a snapshot of the contents of a post. 



I’m in the Visual Editor and help you 
modify the way text looks. 


Adding content to me displays 
alternate text or a teaser on the home 
page of the blog. 


I can help you organize posts into 
large “buckets” and give you the 
ability to customize your site based on 
my content. 
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getting started 


Use both editors when creating wew posts 

WordPress has two text editing modes: Visual and Markup. The visual editor will be immediatly 
familiar to anyone who’s used a word processor or services like Google Docs. The markup (or 
HTML) Editor is different in that it allows you to edit the raw HTML that makes up your post.. 

This comes in handy when you need to do something to your text that’s not supported in the 

visual editor, and it can also be used to add IDs and classes to our HTML tags.. \ 

6d Y\oit' w ttcad F\rsi HT/l/IL 
CSS ay>d is a yrtai v/ay *to 

ledv~y> dll about WTMU 


Visual Editor 


Wordpress Editors 

Upkp44^ 叫 4 行 1&0 ell JS # 

b / i= i= m w m m 

^VnrdprrjtAi kdiEfrrs 


j - 


]»diirdLiEDr mDik tiuilifEenni proi amlcDEU. I'i n^i^ilKbctb] and! »e 
d« you Niks b«c. 


Puip 


■P'raemn 

d K 


l>ill M 4 dJ.U Jrn, 


Markup Editor 


Wordpness 随 tors 

Wmrmmjjmh- |rtlci I riH*"" 11 ! frflJlrimr ^l 1 ■ J 


UpkiMj/_s«r1: m w 

b i Sf-qyMI M NH \A M _ 

^ ly^l HTML 

■nil rpari Mmp ctalt lip- 


-cum jsTvti-^CDtap*", ^00000: m >EM.^ modi his -ml coni. P!*r 

bvih feml stt mMcIi wi yw Mi 


I cwtA M 




Also known as a “WYSIWYG” editor (What 
You See Is What You Get) —— it mimics the 
behavior of an advanced text editor or word 
processor. 


The markup editor gives you more control 
over what the final HTML of your post will 
look like. You’ll notice paragraphs and some 
words are surrounded by tags in <> brackets. 


In this mode you can highlight text, apply You can highlight and apply styles (just like 

styles and see the results immediately —— as the visual editor) but the result is a new 

they’d look on the live site. HTML tag, not the visual style itself. You’ll 

have to click back to the Visual Editor or 
Preview the post to see the results. 


ft 


Sharpen your pencil 


Add the post content that Jay sent over and give the bulleted list a 
class of "features.” 

Hint: Classes are special HTML attributes that help us identify 
elements in CSS and Javascript. They can also add semantic 
meaning to container and parent elements like <div> and <span>. 
Check out http://w3schools.com/html for more help. 
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sharpen solution 


Sharpen your pencil 

Solution 






Add the post content that Jay sent over and give the bulleted list 
a class of "features.” 


Mos-t o( -the 七 wt e>vbry 
-fov- -this Pos-t is pv-etty 

s-tv-aijhi-fovv/av-d. Wt 


Our Bits are Better 

/ 

Vov\i -Povftci -to add a ii-tlc 

l f | | / 


nPfmJLlllili ! 1 _p_"HWWhlE •史 flm/ 乍琴 

[ humgrf- J^prmjiirsii 

to tnc post/ 

Upload/In-s^rt [fj M J3 # 


Vls.u.hI HTMl 

b i f- n m 

m'-m 

ri ， ▼ 鸢： 


匕 CYtd{,t 9 r\CYJ |is -(： bv AiAnriff ， al] are bia. bwn 加叩 lb hi brinR the Iv'h uJen[ in ibe 

^' 5 ^^ 3 ^ J "th Idst Z ' ^ iMfeK^ff^nur Emm.ind rhar nSi nw^ in cuir pmduni. nut th 4 > tiyiUm% nf mur ^ 

pavajiraphs a^d didc’mg I in e 

"the bulleted lis-t burtto 灼 . 


Jiandmaikiji Qaiug。，iL 

■ kiai^ly limill hi indmfI mdiii 私 .mEji ncLimbi 

■ AnilaUe in digram 12 & i 翳 d iyifr-blT ihm 


Pnltr -rfiv h ul p> II - suin 
Word !£& 


jS 5.109 


Our Bits are Better 

P«fmAhiiy，htlfi ^/irmphlLfami 1 i [.hiiei^r f l i > rmjLlirJe , s 


Upload/Insen p. J ： * Visual HTML 

b t lirik b^quate 4«^ mi _mg ul d li zo6t more lookup cloifr tagi 


You day> see *thc HTML edrtov- Kas 
a |*i*t*tlc move ^o*m^ OY\- Wc see *thc 

same 七 €>< •七 as m Visual Edi*tov- 

just cvcv-ytKm^ IS y/\rapfcd *m 

HTML ia^. 


<div id*' mtePaite n >AE Acme, dll we know are b*ts. We\€ b«en ^c^ng togneat 
lengths bring [iHe best calani in ch# bk Indu^cry to our Team and d^at shwi Ln our 
proLtucE {'hi'i k inut EhL L nrw (ii'.ilurcv crT nLkr 17 .imJ ^-*4 biE muc^ 

'MJiv idi’jmiPiJWcV 

<iiF idliiss ures"^ - 

<liXsp.an stvl«_ 1 ont.-ii;se' llpx: line-he^ht ： 15 psfS>Handmade m Chica^a, 
IL <f ^pan x / lii> 

-c Iej-- c\fi.i n vtyli'-< ,, f£ ： n 1 iiw 1 . li ni,' heght 1 ^px. H >P.iiiri\t.iiEingly hu:ilt Id 

indvblrv^- Iv^din^ vEd netdrda^/ x / lip 

<li> <sp*n stylE^"font-siz,€, line-he^hc. 14 px;"^Ayaildblfi in custa^ni 

<fu]> 


<ul dass= !r feature 5 p > 







Drift uvtd 3 C 5:1119 a hi. 


addihg the dlass u -fcaW w 

"to ou\r <ul> clcr»»Ch-t f-fov- 
Uho\rdc\rcd, a.k.a. bulleted, list) so 
wc cars add special stylihj h> that 

la*tc\r Oh. Doh^t wo\r\ry ; y/dl 

to ^ badk -to this a li-t-tlc bit 
latcv-. 
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getting started 


Use Preview to check your post before you publish 


You don’t have to commit to publishing your first post 



just yet. WordPress allows us to save and preview posts 
before we publish. The “Preview” button opens a new 
window with a special web address (or URL) that shows 
the content of your post as it would look on the live blog. 

TKc Publish allows 
you *to pvcv*ic>w> sdKcdulc ； 
diY\d publish pos*U- 


youVc vcady, dl'idk 

Publish dv>d dhcdk ou*t 
youv *f ivst post D 。 灼’七 
y/ovvy i-f somc*th'm^ looks 
you tdiY\ 3l\w3ys 
灼 - fublish” youv fos*t 
ay>d vcmovc i*t -rv-om *tKc 
blo^. 
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hello mystery post 


Your first post is wow live! 

That was pretty easy! But hmmm, there is another post 
we didn’t even create on the Acme Bit blog. Where did 
that come from? 



Our Bit^ Better 

PQgLaaqfi fieni 7 , ^ 4 ^P«Ktrrin 

•Al Armt、aEI wt Ikiwiv lire bilN_ Wk.’vi' t[s< Lf In brin^IhE IitmE EjilifiiL 

in thf bll industry 16 our team and Ehut shows b out pioditct. QKck out the new ft^Uncs 
tii our if>, 3s and ^4-bit 

■‘ SI jmlimik: in ^liLmgjEi, IL 
1 FkLniEiklDREy btfUiB 1 iJidaiay-lHdini; mnddrdi 

* ^IhIdIiIp in cialiom imS 丄 nd * 4 ib-bil. si is 


Poufldln. U-Hist wiW; I I ESf 


HeLEo world] 

co Kilfl by urnwewjp 

Welcome to WordPrcss. Ttus i；5 your Krai p^sl. Edil or ddcle il r thcn start b]o 肚 ing! 


Uanch 


HCMJli PvmVs 

■ Car Qm mji hmer 
- lEbSbraUi 

Rwswil Comrmsndi 

*• ^Lr W4^il<Tua i，n vaifid! 


Archlvm 
【 AfitUa ⑽ 





Hn/i 

1 NeIh AikrT|bi 
■ i-UR i«i 
,F^ilnrs IIR^ 

- f^nmrpKi M£fi 
- ^ordheiuvi 


i*caM In 11 yflfnrwnH fcfiht 


Hit □lag 


ilV<Bid^ paumndh^ 取 h p vi£fVeii. 
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getting started 


Remove or replace sample posts before you go live 


By default, WordPress comes with a sample post and a sample comment to show you how 
things will show up on your blog. We want to remove these before the site goes live so we 
don’t have placeholder content on display to the world. 



fiev-c s the pos-f ： title 
3hd o-f the 
pev-soh who v/votc it. 


a— r ” 0 弋 


Hello world! 


ta VV'nrclrrftflfl. Yhi-, iA yfiur fir^ pAHi. yA\t -nr Ltri-pl 1 * 1 it, tlw^n shm hli J 


TTs Fiin 


& 


■ pwnwirj!, 刚 crnrjnvoc^Tninlinm 會 IS 



OY \ One Response to world! 


Mr VVriT'ti V 4 i 妒 : 


WovdPvcss au*toma*tidally 
assodia^bes youv pos*t w*i*tK 
i\\t date you publisKcd *i*t- 


Wll toMtY datcgov-ics, 
fc^alihks, ahd RSS i h 
the towr»'mJ thaptevs... 


Let’s remove this sample post now，so only our Acme Bit posts show up on the blog: 


⑩ Remove a comment from the 
dashboard. 

You can moderate and delete comments 
right from the dashboard. Find the “Recent 
Comments” section and click Trash to 
remove the sample comment. 


❺ Use the Post menu to edit and 
remove unwanted posts. 

From the list of posts (Posts > Edit) you can 
select and remove any post you want ― just 
like a comment on the dashboard. 


HectM Lommcnlt 

I Fnwn \frWiinIPir%s nn wriifd! _ 

hli, thi s u a qg^nmeFtL fd dekb a 肩 fit, iu%l log in and m^b¥ th< 
f^rFbm#iici. Thrrf" ymi will hwe- 

L'n^viuvi 1 Hculv I EdiS i Sujm 9 Trjah 


^ Hello world! 

Edit I Quick Edit Trash I View 

Title 




Comments art d staple just 
about a^Y bloj. WcVc 
{jo CoMCc -tiicm "m boo muA detail 
V^cv-C) bu"t you 乙扣 Ic3v*y\ d bi*t 

dbou*b *tV)Cw> m *b^c 


Bulk Actions t Apply 


|-f you vemove a post -Pv-om *tKc blo^, 
WbvdPv^css wtor»\d*bddllY d 士七 all 
dommCy>*b assod*ia*tcd w'rtK 七 ha 七 fost 
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a picture is worth a lot of bits 



Images are a powerful tool on the Web and are an integral part of any blog. However, when 
we use images on the Web, we need to make sure they are sized and formatted properly so they 
look good and can be loaded quickly when someone visits your site. 


6 IP a 灼 d av-c smallcv- -file -fovmats 

(or \tov\s ay\A - fho'toyafhk images. TKcy also 

have a 1'im'iied dolov- palette (2.^ to\ors). 


PK^-2.^ alloy/s y< 
bo do *tvay>spavcy>t 
bddk^vouy>ds (v>o*t 
available m JPE^) 
bu*t 七 his is y>o*t 
supported by 
|r>*tcvir>c*t £%plovcv 
厶 (y/K'idK d lo*t o( 
people still use). 
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You don't need Photoshop to edit an image 

Although Photoshop is by far the most popular image editing program —— it’s not the cheapest 
and it can be overkill if all you need to do is resize and prepare images for the Web. Here are 
some free alternatives for simple image editing. 


^IMP 


Picwik 



GIMP is a free image editor that runs on multiple 
operating systems and is the open source alternative to 
Photoshop, http:/ / www.gimp.org/ 



Picnik is an online image editor that runs 
completely in the browser. It only does the 
basics but sometimes that’s all you need. 

http:/ / picnik.com 



Paint.NET 

Paint.NET is a good Photoshop alternative if you’re running 
Windows, http:/ / www.getpaint.net 



The image that Jay gave you is too big to fit into the post properly. Download bits.png from www. 
heeidfirstleib.com/WordPress, and then use Picnik to resize the image and export it as a high- 
quality PNG-24. 




6\o h> ivbtfar>d 
unload *tKc imay *to *thc*iv 
Jus*t like y/*rth 1/Vov-dPv-Css, dll i\\t 
is AoY\t youv -Pavontc 
v/eb bvov/sev. 
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exercise solution 


The image that Jay gave you is too big to fit into the post properly. Download the image from 
www.headfirstlab.com/WordPress ，and then use Picnikto resize the image and export it as a 
high-quality PNG-24. 


⑩ Upload bits.png to Picnik. 

Once you’ve grabbed it off the Head First 
Labs site for this book, upload bits.png to 
Picnik so you can resize and save for use 
on your blog. You don’t have to create an 
account to use Picnik~just upload, edit, 
and save. 




❹ 



Click on Save and Share to export 
photo. 

Since all we need is basic editing we can 
skip right to the “Save and Share” section 
and adjust the pixel width to something 500 
pixels or less. After that, save as a PNG and 
you’re good to go. 


TKaVs max. sizjc youv hcadcv- 

tdiv\ be- Wlc’ll lcav-y> move about 
i\\\s y/c siari dusWizjy>5 ouv 
srte’s look dv>d 

❹ Save to your computer. 

Once the export is done, you’ll be 
prompted to select a download location on 
your local computer. Save it somewhere on 
your machine and you’re ready to use it in 
WordPress. 


:: ■ [… 

^ jf 罾 ■ 


lave Ihti photo la my CDPBiiirtjrr 
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Add aw image using the media library 

There are two different ways to get your images into WordPress, and both ways end up putting 
your images in the same place. You can add an image to the media gallery from within a post, 
or you can add new images outside the post in the Media Library editor and then select them 
when you are creating a post. 


You cby\ always add images av\d 

o*tKcv media -fv-om 3 post- 


In-post upload 


Media Library 



You can upload images to a post directly from 
either editor when creating a post. A dialog box 
will pop up and prompt you to select a file to 
upload. 


If you want to upload media for use in a post 
later on, select “Media” then “Add New” from 
the Dashboard navigation. Images can then be 
chosen from the library and added to a new post. 



ExeRciSe 
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fixing permissions issues 


Uh - oh 






M s4*pr?-Pii 


m 


Unable to create directory yserver/public_lhtml/acmebit/wp-content/uploads/2010/04, 
Is its parent directory writable by the server? 




You II ^C*t a fCVm*iss*ioy> dewed 
cv-vov* i-f you *tv"Y *to upload 
imd^e b> a scwcv 七 ha 七 i 讲七 sc*t 
U P P^°P cv "Iy >wi*tK Wov*dPv*css. |*ts 
easy *to *f i%, bu 七 you da / 七 upload 
av>Y*tK*m^ urrtil you do. 


Prepare to upload 


Depending on your web host and their support for WordPress, you may be greeted with a 
permissions-related error when you try to upload an image or other media file to a post. This 
happens when the code that runs WordPress does not have permission to create or write to 
folders on your server. This is pretty easy to fix, but first a little background on what’s going on 
under the hood. 


□ 


wordpress 



wp-content 


The -fivs-t iW\v\^ you II t\ttd io do is add a 
-foldcv- “uploads” m 七 he v/p— 
dived-tovy. WbvdPvcss will ivy -fco Cyclic 七 his 
-Pov- you bu*t ^o*t be suddcss-ful. 



uploads 


Us'm^ youv- FTP 

you ^ ri^vt di 乙 k *to 
w yt o 灼 a -foldcv 

3Y\d sec i*U pcv-missions. 
ttcv"c v/c sec or\ly 

ov/r\C\r ta 灼 v/V"i*tc> 

^i\\\eM medy\s Wov-dPv-css 

6a” 七 …. 


uploads I nFo 


uploajds 


CIrfW-rjl? 


■:>w 


uA ClriHjp 


Crmifi wtifrl ; | 

〔Apgty M eradojitd tKm-j.,. J ( App 4 v 、 

Kurrrma_5K. 

Uwr: ^ fttKJ M M Extcuw 

■GrcHJp: M LJ WWm 0 F»r+«Jic 

Htortd. Bt*d U W#Wte f^rurf 

OlUI 7 SS ： nwu ， J 5 r_?i 

i Apuly lih rriLf-us-EnJ Icms-... 1 Aup^ 


34 Chapter 1 













getting started 


Update group permissions to get image uploads working 



Launch your FTP client. 

You’ll need some way to access folders on your server — log 
in to your FTP server and navigate to the main WordPress 
directory. 


❻ Right click and ''Set Info' 

Create the folder “uploads” within the wp-content 
directory then right click and select “Get Info.” A dialog 
box similar to the one on the right should appear. 



Update group user permissions. 

There are two options you need to change: 1. Change the 
group user to whatever the web server runs as (usually 
www, apache, or nobody) and 2. Give the group “write” 
permissions. You should end up with the numbers 775 in 



the “octal” window. 


Vou may ~ 抑 1 七 you^r v/eb ^osi {p 

out y/V^at user v/cb server as. M ^ 
七 supports Wo\rdPv-css should support -Vile 

unloads. 




Inlu 


uploads 


Gce'ictaI: 

jml CrtPLrp. 

Owner 




CfOUf >： 

Anity Iq tinLlaicd iEcmsk■■■ 


1 Applv ' 


炉 urmisiSLiam. 

User; 0 Re*tf 3? Wriw *3 Exccuk 
Crpujf. M Writ* ^ Execute 

World: ^ Eeirf □ ttrilt 兒 meruit 


■! Jrtnl 




pl7 Lu S!riq.lu^C4l ilrrn^.. L 




丁 he o^t^l is a humev-ifi 
x ^pircsch-ta-tioh Jc a 
p5V"*tidul3\r -file ov -foldcV" ； s 
pcirmissiohs. OOO is ho 

ad 乙 ess ahd 777 is evev-yohe 

hds sc,t.css. 



Beware of 777 or M all access” permissions 

You might be tempted to just set your permissions to 777 in lieu 
of setting a new group user and permission setting. This is a 
bad habbit to get in to, because 777 permissions on a shared 
server can leave your files open to malicious users. Be careful!! 


Permissions: 



User: 0 Read 

fVf Write 

0 Execute i 

Group: (Vj Read 

gj Write 

0 Execule : 

World: 0 Read 

0 Write 

0 Execute Let’s tvf uploading 

Octl 777 ■■州 x 

! that image again 


now... 
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exercise solution 



The image that Jay gave you is too big to fit into the post properly. Download bits.png from www. 
headfirstlab.com/WordPress, and then use Picnik to resize the image and export it as a high- 
quality PNG-24. 



⑩ Re-upload your bits.png image. 

Once your directory permissions have 
been fixed, you should be able to upload 
media within WordPress. A thumbnail will 
appear on the left and should be a cropped 
or smaller version of the file from your 
desktop. 





W 七 k upload is s^UessQ, you should see 

a 如 I 03 box with you\r ih i-t ahd 

sow optiohs to add doh-tchl ahd adjust the 
aiwr»ChsiohS o4 - the 





Set the image size. 

WordPress will try to slightly scale down 
your image by default. Since we’ve already 
prepped our image for the Web, select the 
“full size” radio button so we get our full 500 
pixel width image. Finally, click “Insert into 
Post’’ to add the image to the post. 


All Wov*dPv*css docs is jus 七 display at 

a smaller siz^c — ••七 docs^-t ad-tually 七 he 

f>'i%els like PKo*tosKof or PiMik v/ould- 
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XL ^rnm B|fc P^g. 




dur Bill jltc iener 






■r .— 



Preview in the visual editor. 

After you add the image it should appear 
in the visual editor as an image and in the 
HTML editor as an <img> tag. 


Out imajc is *m youv- post you 
C^y\ jus*t like a^y oi\\tr 


pos*t element 



CM &tp#ng Bpl^ir 



o 


Preview in the browser. 

Before you publish, make sure you test it in 
your favorite browser. 
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button up your bits 


|<f we leave pla£.cmcir\*b 仏 a 七 

WovdPv"CSs ^'ivcs us, ou\r imajc pushes 

*tV^ post *to *t^c 




Hrm. The image is 
making the text below 
it display weird. 



64 


At Acme, all we 

know are bits. WeVe been ^oin^ to great lengths to brina the best talent in ibe bit 
industry Lu aur Luluii and Lba【sliowts in uui pmdud.. uul ih^ new ufuur i6» 

32 and 6k|-bit models: 




Adjusting images withiw the post editor 


Don’t worry, you’re not stuck with 
the layout that WordPress gives 
you when you first upload your 
media to the post. You can click 
the image itself to bring back the 
image editing options and you can 
also switch to the markup view and 
make direct changes to the image 
tag. 



Acme Edt BLog, 


Edil Fm t 




Our Sits an. ^eiocr 


! hip 


£ ti ** a 


V - 1 
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getting started 


Edit your post to move the text down a line 



g J M- iH* wjeMuw eJ^jp Lb^i 

n hrd-1inii^i l K B wbh cximr 1 相， H^DrTr/up^ajds/JDId/H/bSb ■ kna 

ctu9>__jJqf^arH 貪 £t ， 1bf1 «i^p =8migifi-^M" ire«"hEpi/.fiix l comfrvp^ 

mwrM 由 ih -"SfflT fcrm. iJI 

m icmw 駟 , l>Qi. «i>k fairq m grtn: id l^i^gi tit* Imc rjliru n [tu-b 4 

o our itMM and shEmw wir OHKk : it«Lr_s of ehi^ 3 i, 

12 im frfc-p»«+k 

-ch^ ci#jm viilE-^feni ■ 34^« L3fu_ PiwtaMfihL 3 卸 jt, 、 HiiiiilrhiiJ>r m Dilcjyo! 
i.^.< F i|j«r ，嘑 川， 

MiflE-Ibnfl ■ dM 臞囑 L 3 ^a. irwlit If^Hi v p^u?riiLLlilifilT IpiIIL l# F 

kriin^ alanJ^r-Jmi/ipHir !■ ^ ^IIp 

L3pj^^ ^thf ^E^iht 3 ^hi B F^aiU4r In ^ualdri L?B iiui 
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iHp - «*h^ B saqr Nidhry^r 拎 
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li.-<fS[Nin>4/IJ» 
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In the HTML Editor you’ll notice that the image tag 
is in the same paragraph as the main post content. 
This is what’s causing the image not to be placed 
properly when viewed in the browser. 


All we need to do is put a “hard” return after the 
image tag which will create a new paragraph for the 
main content. Hit enter just after the </a> tag to 
move the content to the next line.This will make the 
text and image wrap properly on the page. 


Y^u da 内 also add a w hav-d w vc*tuvir> ^ *tKc Visual 
Edrtov-. |*t simfly adds a \rc*tu\rv> like you jus 七 . 
did above *m *tKc HTML edrtov. ^ 
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looking good! 

Welcome to the Pit Plog 



Acme Hit Brog 


FVvxrd% funrnd by 


At Acme% ni l v§^ kimw an: htts. Wr r vr lirern. t^a ^rf^al iRr^itui la bri nj^ I Hr IkmE litlfnt 

in the bit industry Cjd out Ec^ni and \.hR\ siiows j 口 our pro 如 d: Chedi ogl the new Ecattirca 
nF rmr 32 md fi 4 >l]Lt mckdelsi: 

■ £luidir-Kk dbLa^a, 1L 

* I'l. i as-1n!idq^J.y bo0 ^ tiv ludmlrylaiilLiLE atmdflirTt 

■ AnUiHfi Ln ^■^■k ： i: iaS irtd 1156^1 ilies 

PaedncSln ihlMiftiiorjBil | t-tavis aiQf»imgVI 


Ar?ruvi!> 

囑 ApriL SDU3 


Acme Bit Blog 


This is perfect man! 

I can’t wait to start 
blogging about all our 
cool Bits. Thanks! 


Our Bits are B 

PflflMDftAEf-LifllOtf 


FtlH^nE Posts 

i Oux UbiH tsw r 
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getting started 


Your WordPrcss Toolbox 

You’ve got Chapter 1 under 
your belt and now you’ve 
added a basic blog and your 
post to your toolbox. Next up, 
making your blog looks more like, well, 
your blog. 




BULLET POINTS 


■ WordPress must be installed and hosted on a web 
server. You can find of list of preferred hosting 
companies at http://wordpress.org/hosting/. 


■ Depending on your server you may have to adjust 
upload folder permissions so that WordPress can 
save your images on the server. 


■ Use an FTP client to upload WordPress to your web 
server. 

■ WordPress uses a MySQL database to store all the 
post, page and comment data for your site. 

■ WordPress has two editor states, one for editing 
HTML and the other for editing content like in a word 
processor. 


■ Never leave directories with open permissions (777). 
This allows any user on the system full read and write 
access to anything in that folder. Yikes! 

■ Preview your posts before you publish to make sure 
the text formatting and images look correct. 


■ Use JPEG and PNG24 for images and and GIF and 
PNG8 for icons and other visual elements that display 
properly with a limited color palette. 
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You’ve finally got your own blog. But it looks so...generic. 

Time to make it your own. Word Press comes preloaded with lots of themes you can apply 
to your blog, but we’re going to go one step further and make our own custom theme. 
Along the way, you’ll learn some basic HTML and CSS to really make your blog look 
exactly how you want. Well also delve into CSS rules, which allow you to quickly change 
how your blog looks, and take advantage of Word Press widgets to easily add sidebar 
content to the blog. 


this is a new chapter 
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old school vs new school 


A tale of two sites 


Now that you’ve got the Acme Bit blog up and running, Jay is hoping to make it look more 
like the company’s regular website... 



blog (below) 


TKc dc-faul*t 1/VbvdPvcss 
blo^ des'ioi^ is 灼’七 *too 
-fav- o-f-f + Vom 七 he 
site’s dcsi ^： *i*t Kas a 

lav-^e Kov*izx>y>*tal bavmcv* 

up *fcop, dy>d 七 ex 七 do^Y\ 

’ bclov/. 
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changing your blog’s look and feel 


The Acme Pit Company home page 

The Acme Bit Company website is a really simple site with only three pages that cover 
the basic information about their main product: Bits. Even though the site isn’t a blog, 
it’s based on the same stuff as our WordPress blog: HTML and CSS. We can definitely use 
that to our advantage. Let’s start by visually comparing the main site with the blog, to see 
what they have in common, and what is different across the two sites. 
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Check out http://acmcbit.com 





Study the Acme Bit Company home page and browse around the site. Start thinking about 
design elements — images, fonts, colors, etc. — that we will need to duplicate on the blog to 
make it feel like it was designed and built to accompany the main site. 
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exercise 




Identify design elements from Acme’s home page that will need to be used on the new blog. 
What might have to change on the current Acme blog? We’ve already found one to help get you 
started. 


krmb J.1 riimfUAV 




O Acm _ Our PrfriluriH ^ DHlwt U« 


Acme Bit is a l 枕 ding niaitd^etiErer of binary information unite 
for the computing and telecommu nicatiions industries 


o 



1 i fllbft L_m ^fium Mil, S iBILft L#r_m ^um < 46 ^ _ Hfl, 

•^oiKAriMi ifl, i*q flCi wniKfltiMi §■, i*g 

PMPTKrf Bpn pi^r yl IpbqHV t> WPthW fipnpi^r In^siM^ne yB Ip^rv qrl 

•4ptajjr_ mpigpu ittqLii. 4J| unArr mMrn >pgl^r_ mp^fUi tl inirT mrwn 

wmm. qyo rwslpjd nmnlAtHi mnum. qyli rwrlrvd cnan^Aon 

lAnwo literfSL L^rncptatoffs. 


E 4 OliJi UiT_m fr&.m 农 Aqr ir'if, 

WiWSiiur«■, w-m 
puyniQip lapmpip' np^tiurT! ul ^pbqrii pi 
niHpnji 11 apnim ad nrnrn 

wnwTi. rwrirvd nDnTlDton 
LiarmtabHis 


The page widths are the same 


but we’ll need to make some 


adjustments with the background ， 


since the site has an all-white 


background and the blog doesn’t. 
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changing your blog’s look and feel 
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exercise solution 



Identify design elements from Acme’s home page that will need to be created on the new blog. 
What might have to change on the current Acme blog? We’ve already found one to help get you 
started. 

Coy>s*is*tcr>*t Vill Keif people 

*tKc blog 




Acme B it in a leading nxa^uf^eturer of binary inibnnation y nit£ 
for the eomputinR and telecommunications industries 



o 

|32 || 
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1 

LiT 1 


wpfrtUQiflS _■ 綱 

fHjfmpd Eiirnp^i 1 In^KldurC ul Ip^irip pi 
■^giprf mpgnJi BnirT rwrnmn 

wnam. qua rwslryd nDmlBbon 
iAhtwd IlfHms. 


flltii L^Ttm ^isum _ Hfi, 

k _g « 
an^#une yl _ 
•pgta^rf mppU 1^1 vnirr mrmn 
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E4 sflJbi LQTfm f] 取 m -6^ sd 
wnwfiliMr fe^ptKMifi 刚與 
-piJVrnQip BpnpHp 1 InpdKlurr! yl ^pb^mp p^l 
mpjnB f^l mnim rsrmrnn 

■¥DfHiin. rwrlrud nonTlDton 



The page widths are the same We are going to need to add this 

but we’ll need to make some grey navigation bar at the top of the 

adjustments with the background, blog. We want to keep the links the 

since the site has an all-white same so we don’t confuse visitors, 

background and the blog doesn’t. 
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changing your blog’s look and feel 



|| make *tKc blo^ Z dolumy>s ： OY\t 你 am dolumy> (or *tKc blo^ 

dor>*tcr>*t ar>d a smaller sttov\A dolumv> -Pov *tKc sidcbav. 


We’ll want to put the Acme Bit logo The content on the blog will be our 

somewhere，and we need to make posts in reverse chronological order ， 


the header (top) images the same. plus a right-hand column, or sidebar ， 


for related links and content. 
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who called the style police? 


P 
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This might seem like a daunting task, but 
once you dive into HTML and CSS you’ll see 
how easy this is to do. 

Both of our sites are actually very similar and share 
design elements. This means that we should be able to use a lot of 
the Acme Bit Company website HTML and CSS to get the design 
transferee! over to the blog. We’ll use the default WordPress theme as 
a template to create our own Acme Bits theme. 
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changing your blog’s look and feel 


Awatomy of a WordPress theme 

We’re going to change the way our blog looks by using what WordPress calls “themes.” A 
theme is a collection of PHP/HTML and CSS files (more on these in a minute) that specify 
how your web page will look. WordPress users can change the entire style of their site 
by simply installing and activating a new theme. And better yet, you can make your own 
themes to make your WordPress blog look exactly how you want it to. 


A theme tells WordPress how and where to display your content and images 





gtareM \rcsul 七 

sV\o>w 3 *tvblc 
-fov cat\\ post 
•bV^a 七 waUV^cs 



index.php 


This o-f -the theme displays 
the home P a 9c a | ist ^ J $is 

广 vcvcvsc dhvohologi^l ovde^r 

(rnos ^ Usi). WtW -blk 
about ， iUas o, ihc c ,d 

… 3 mhuxe... 

1 /VovdPvcss hs a \)\AY\CM 

-template -Piles a^rc used b> display 
ewytW 》 *fv-om ta*tc^ov"Y pays *to 
-fov-ms. 


search.php 


single.php 


S’mgle post pages display 
a P os t •… its Chtivrty dhd 
provide a way -Pov- visi-to^s 

"to dorwr^ht Oh the post. 




— ^ 


Tiinr\^s like tolovS) 

layout d^d muA n\oYt 
remd'ms tor\sis 七 eirrt across 
all 七 hese -files au^tomat^ally- 
TV^cyVc o*f*tcr\ tailed 
■tcmpla*tc *f»lcs. 




f\\t same 乙 cm*t ⑼七 a 灼 d 
images look di*f*fcv-cr\*b 
atv-oss 


■themes. 
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all together now 

WordPrcss themes area collection of template files... 

Each template file in a theme has a specific job. One might display only the sidebar and 
another might be used to render a comment form. You can also add your own custom 
template files that can be used for just about anything you want within WordPress. 



My Great Theme 


-f lics IWrted 

si% shoym TV^cv-c av*c 

mov-c ar\d you 
make youv- 




header.php 



comments.php 



sidebar.php 



style.css 




themes 




All theses a\rc s-toved ih J 

the / wp-doh-tcht/theses 
di\rcd-to\ry i h youv- IVov-dPv-css 
ms-talla-tioh. 


A ihcrwc cav\ be as small as -the iv/o 
\rc<\ui\rcd -files ： dv\d style, 

dss. Evcv-y-thmj else jusi adds 
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changing your blog’s look and feel 


... all working m concert 

Think of your WordPress theme as an orchestra conductor: there’s a ton of instruments that 
each have their own role, tone, and notes to play, but they all need to combine together to 
make something that sounds wonderful. 




s : 七 :於 

A «vutV> ^ or . ^ort 
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style.css 


header.php 


index.php 


WcVc *to look 
move dloscly a*t v/Ka*t 
•tKcsc pKp Y\\ts actually 
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二 t f ⑽卜 H 
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footer.php 



comments.php 


CommCy>*b.pKp suffovts 
*tKc -fur>d*tioy>ali*ty (or 
people v/Ko visi 七 youv 
blo^ *to dr>*tcv- *thc*iv 
dommCy>*b oy\ youv posts. 
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themes are powered by php 


?W is the logic behind your theme 

Because your blog is essentially a big collection of lots of little different files, something has 
to pull that all together to create one page when someone types in your blog’s URL. And 
that thing is PHP. To continue our performing arts metaphor for a minute, PHP is a scripting 
language, and the “scripting” part refers to the fact that PHP essentially designates what is 
“said” or “done” by the HTML for your blog. Said slightly differently, PHP is code (not very 
human-readable) that works together with MySQL (your database) to generate an output (the 
actual HTML for your browser). Let’s take a closer look. 


TK'is is a snippet o-f *thc PHP -fv- om i\\t -f ile -that displays ^ 
md'iv'idudl blo^ fos 七 A^ / 权， brU ⑽七 he <?— 

ay>d <?> ia(\s IS ?W? sd\r*ip*t—else IS flam old 

WTMU 


PHP code 


> 




This bit o-f PHP Code asks tKc 
database -fov *tKc URL o( 
fos 七 duvvcr>*tly viowcd- 


i. 


<h2 class 
esc attr 
rel 


^entry-title^Xa href =,, <?php the permalink () ; ?>〃 title =,, <?php printf ( 

('Permalink to %s r , 'twentyten’ ），the title attribute ( 'echo=0 ' ) ) ; ?>" 


bookmark ,, x?php the_title () ; ?></a></h2> 

— -this (\tb> title 

<div class = ’’entry-meta’’> ^ 七 ^ post 

<?php 


('〈span class =,, meta-prep meta-prep-author ,, >Posted on </spanXa 


printf( 

" title="%2$s’’ rel=’’bookmark’’><span class=^entry-date ,, >%3$s</span></a> <span 

'author vcard〃><a class=〃url fn n 〃 href= 〃％ 4$s’ 


href= 〃％ l$s' 

class= ,, meta-sep ,, > by </span> <span class: 

title=’’ ％ 5$s’’>%6$s</a></span >’， 'twentyten’ ) , get 一 permalink () , esc—attr ( get—the 一 time () 
) , get—the 一 date(), get_author_posts_url( get—the—author 一 meta( ' 工 D' ) ), sprintf( esc_ 
attr_( 'View ^.1 posts by %s ’， 'twentyten’ ）， get_the_author() ), get—the—author()); 


?> 


</div>< 


encry-meta --> 


TKc au*tKov 
o( pos 七 is 

spc6-f icd Kcvc- 


… a 灼 d \k,J 

v/ds pos-ted Kcvc. 




da*tc *i*t >was 

pos*tcd • 
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丁 his is y/hd 七 oi*v~ looks like i-P y/c use "the W vicw souv*dc W 

-Pea-tuve *m ouv web Wowseir | 七 is "the ddiual HT/^L page stv\i 
•to youv visi-tov^s b\TOY/sc\r when 七 hey iype \v\ a URL (or youv 

blog. The same PUP has be ⑶ vcpladcd wiih 


HTML output 


^^Werts *thc ad*tual blo^ pos*t URL. 


<h2 class="entry-title"><a href= M http :// acmebit.com/2010/04/07 / our-bits-are-better/" 
title= M Permalink to Our Bits are Better" rel= M bookmark M >Our Bits are Better</a></h2> 


u 


<div class= M entry-meta M > 


七 he trtlc -fov *tKc post 


<span class="meta-prep meta-prep-author M >Posted on </spanXa href= M http :// acmebit. 
com/2010/04/07 / our-bits-are-better/ M title= M 6:29 am" re1= M bookmark M ><span class = M entry- 
date M >April 7, 2010</span></a> <span class= M meta-sep M > by </span> <span class= M author 
vcard M Xa class= n url fn n M href="http://acmebit.com/author/acmeadmin/ M title= M View all 
posts by acmeadmin M >acmeadmin</a></span> 


</div><!-- .entry-meta --> 


/\|[ -tKc autKov-, date/ time, air>d othev- 
•m》o -Pvom i\\c ?W? dodc is v\o^i -filled 
•m hcv-C wrth ddiudl dorrtcjvt -fv-om you\r 




1/VbvdPvcss database. 


So is that why so many of 
the themes template files 
end with .php? 
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it really does matter 


Always use the .php extension for WordPrcss theme files 

Excluding stylesheets, JavaScript, and images, all template files in WordPress should be saved 
as .php files —— even if they only contain HTML. It’s OK to have a PHP file that doesn’t 
actually contain any PHP code. These files are just interpreted by the web server as HTML 
and sent along to the browser. 


TKc o-f d -f ile mdludcs 

dKavad*tcvs a-f*tcv- do 七 （.）m 七 he 

^iley>ame- TKcsc c%*tcir>s*ioy>s help 七 he v/cb 
sewev uve ou*t v/Ka*t *to do WrtK *tKc -f ile- 




This -file has .Ivtrwl 

extension da 灼 only 

匕 oivta’m WTtAL markup- 
PHP to At v/ould ^o*t wov*k 
•m hcv-c. 


index.php 



index.html 


|y> ovdev* -fov ouv* •tKcw'C *fco -fuy>d*tioy> properall 'tcw'pU'tc 
V>3ve 3 .pKp c%*tcir>sioir>- Wlc s*t'ill pu*t ttTAIL 'ms'idc of 七、 
da^*t use dir> K*tml C%*tcir>SiOir>. 


-f iles mus 七 
v/C jus*t 



o 


We 5 re not going to make you write your own PHP. 

PHP is a powerful web scripting language that is 
used all over the Web to build interactive applications 
(WordPress included). It’s also way beyond the scope of 
this book, so we’re not going to cover it here. We’ll use some PHP, but it 
will be code already written for other themes. 
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Match the WordPress template file with its theme function. 



functions.php 




404.php 


header.php 



page.php 


Displays a full blog post with title, 
meta data and a comment form. If 
the post has comments, those are 
displayed as well. 


Displays a “page not found” message 
and can potentially direct the visitor 
to an alternate page for the one they 
may have been looking for. 


Displays the top of the .html file for 
all other theme files. Contains page 
titles and calls to other resources like 
stylesheets and JavaScript. 


Doesn’t directly display content from 
WordPress but adds new functionality 
that can be used by other template 
files. 


Displays “static content” in 
WordPress —— that is, any content that’s 
not a post. 
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who does what 


秦+ ♦ 




Match the WordPress template file with its theme function. 



functions.php 





single.php 


404.php 


header.php 



page.php 



Displays a full blog post with title, 
meta data and a comment form. If 
the post has comments, those are 
displayed as well. 


Displays a “page not found” message 
and can potentially direct the visitor 
to an alternate page for the one they 
may have been looking for. 


Displays the top of the html file for 
all other theme files. Contains page 
titles and calls to other resources like 
stylesheets and JavaScript. 


Doesn’t directly display content from 
WordPress but ads new functionality 
that can be used by other template 
files. 



Displays “static content” in 
WordPress —— that is, any content that’s 
not a post. 
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changing your blog’s look and feel 
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WordPress theme files are a collection of HTML, text, and special template 
tags that tell WordPress what to display in a particular area of the blog. 
Remember, even though they contain HTML, all template files in WordPress 
are saved as PHP. Let’s take a closer look at a sample template file: 


yOcadcvO 

lays i\\t 


This is 匕 ailed w Thc 
Loop w —v/i-thm rwos-t 

o( 七 he l/VovdP\rcss page 
pos-t do 的七⑶七 is 

displayed- 


<?php This is a pup 

/** blod at the top- The 

* The main template file scvc\r ij^ov-cs -this s-tu-f-f 

* bu-t it helps us stay 

* Qpackage WordPress ov^hiz^d. 

* @subpackage Twenty Ten 

* @since 3.0.0 
?> 

<?php get—header(); ?> 

<div id= 〃 container〃> 

<div id= 〃 content〃> 

<?php 

/* Run the loop to output the posts. 

* If you want to overload this in a child 
theme then include a file 


* called loop-index.php and that will be 


used instead. 


get template part ( 'loop 7, , 'index'); 


</div><!-- ^content --> 
</div><!-- ^container --> 


<?php get sidebar(); ?> 
— ^ 

<?php get footer(); ?> 


We dismay 
a 灼 d V 。 


sidcfeav ay>a kooicc jus 七 

I \Af# 
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fire up a new theme 



T\xt Hornes v/*itV) 

WovdPv"CSS is desired "to y/ovk well 
lo"ts of di-f*fcv"CK\ , t towtwt 

dr\d use s£.cr\ 3 V"ios. |*t will be *bV^c 

base template -fo\r ou\r ^ 



Create a new theme 


Before we can start changing the way the blog looks, we should copy the current theme 
so we can modify it to look like the Acme Bit site. That way if we mess anything up or 
don’t like the results, we can always just go back and use the original theme again. We’re 
going to need to jump back in our FTP client to do this. 

⑩ Navigate to the themes folder. 

Connect to your web server using FTP and in the wp-content folder, 
you’ll find a directory called “themes.” Inside is the default “twentyten” 
theme that got installed when you created your blog. We’re going to 
copy it and modify it to make our own custom theme. 




Copy 4 twentyten 

Duplicate the twentyten theme and all its files and then rename the 
folder to “acme” or something similar. 


_ ， 



• JF ■#*i*r 

i 喊曹 ■ 

n Am 

Jh 


f 


i 


oy\ FTP diwt you use 

you’ll ci-thcir Y\ttd bo dupli^a-tc ihc -foldcv 
饮 ^v-caic a new -Poldcv- a^d dopy 七 he 的 
o( io -the /adme 

div-c^Wy. Jusi vcmcirwbcv* -to dopy so 七 he 
-riles stay wheve they avc- 
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changing your blog’s look and feel 


o Check your files. 

Navigate to the / acme directory in your FTP client and make sure all 
the files are there. It should look identical to the “twentyten” theme. 




MU 




壯 pom*t ou\r 

should have 七 

same sc*t -f iles as 








o Activate the ''acme" theme. 

Once everything is in order, head over to the Appearance section of 
your WordPress dashboard and activate the new theme. The image 
thumbnail and text should be the same, but don’t worry, we’re going to 
change all that a little later. 


m 


Thaa>7.- 

Mw i'i Mp ' *，#,■，■ 



■S r 膏 1 t ■— 


■ml k "jh i |i wiHi. g j 




0 Rir ilVh ； 




mmi rHHHii ■ , 





tT»?1 f 1 




，■■ ■■! fmm BLP 

ii at mi, ph# i 


■ UTiTM ■ 




_!• taw ，mHm M iHHi- 
rwiM 


i '%rra -■■n id 


,Wm wa H I li i- 

■ ilv»Kn 


AviibiM ， 





■HpM 


_ 
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1<Jifa3rt> Ih* 

itaiiPpiiiH 


how bdsidally li^vc "two o-p 
the s^rwc theses ih IVovdPv-css. 
As wc modify wc II 
update the ihub^hail av\d text 
"to V'C-Plcdt the hCw thcr^c. 
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stylesheet rules rule! 







StylcshcGts dictate the look and feel of 
pages in WordPress 

Cascading Style Sheets (CSS) are the standard way in which you apply “styles ” 一 
fonts, colors, background images, etc —— to web pages. Using rules and special 
selectors (which we’ll explain in a minute) that reference HTML elements within 
a WordPress page, you can have a ton of control over how your pages look in a 
browser. 


I 的 ordtr (or CSS *to y/ov-k *i*b mayd, v/c *to *tcll ouv template 
-p*,| C s -tKcy fmd i\\t stylesheet This brt d markup ^ocs *m 

七 he <Kcad> element y/V>idK be -fouv>d m Kcadcv-.pKp 七⑽ … 七亡 . 


<head> 


<link rel= 〃 stylesheet 〃 type= 〃 text/css” media= 〃 all 〃 href=〃<?php bloginfo( 
'stylesheet url r ) ; ?> f/ /> 


</head> 


Because -the hcadcir.php -Pile jets used all ovev ouv 

s-tylcs \rulcs v/c use 6 如 be used by ov\ ouv- srtc. Cool^ 



header.php 
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Rules do a lot of work for you 


A CSS rule describes what something should look like, 
such as the color or font of text, or where things line up 
on the page. The really cool thing about rules, though, is 
that they’re reusable. You can assign a color and a font 
to a paragraph (a <p> element in HTML) and then any 
other page that uses a paragraph element in your site 
will inherit those rules. It also means that if you want to 
change the font across your entire blog, you just update 
the CSS rule for the <p> element, and voila! Your new 
font is automatically updated everywhere on your site. 


#header 



background: #ddd; 
height : 50px; 


#nav ul { 

float : right; 
margin : 17px 000 


^.This is a sclcd-fcov-, yiW\CM y/c rwc^-tio^cd 
cav-licv-. H Comes bc-Pov-c "the £.uv-ly 
bmadkei -the { symbol) a^d i-t 

whidh ttTAIL "the 

s'tyle v/ill be applied "to. 七 his ddse ； 

ihai’s ihe hi (sedo^d headev-) 


~f~Kcsc vulcs dcsdv*ibc Kow ouv* Will look. Ouv headev 

is ^v*cy ( 养 ddd ’IS 七乙 al 

r>o*t3*tioy> -fov dolovs) dv>d s'mdc 七 he 七 he y>av'i^atior> is v/i*tKm 
ihc header, i*t *too W\W Kavc a yrq badkyo ⑽ d. 


O About Acme 


fi Ouf Products : Contact Us 

__ ± _ 


#mast h2 


float : left; 
font-family: Georgia, 
font-weight : normal; 
font-size : 2.4em; 
line-height : 1.4em; 
width : 7 OOpx; 


serif; 




parpen your pencil 


/ 

These ^avigatio^ \cov\s arc ddiually badkyou 灼 d 

i 你 ays. iVe da” “se WTML classes -to make eadh 

i"tcrw *m 七 he ^avigatio^ lis-t display a 

\ 

0uv~ 你 CSS v~ulc is *Poduscci rwos*tly ok> "tyfoftV"3Phy 一 

■these avc -the (oivt v-ulcs. Wc also use a u -Ploat element 
v/hidh helps us posi-tio^ ouv- 七 "to the logo. 


Let’s give this CSS thing a try — it’s not as hard as it may look. 
Open up the style.css file in our newly copied Acme WordPress 
theme and change the background color and font for the whole 
site. Hint: Look for the "Fonts” and "Global Elements” sections in 
the CSS file. 


Wsc "these websi-tes -feo help y« 
wi-th this c^cv-disc. 


f ou 



http:/ 

http:/ 


.w3schools.com/css/css_text.asp 
.w3schools.com/css/css_background. asp 
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sharpen solution 


parpen your pencil 

Solution 


Let’s give this CSS thing a try — it’s not as hard as it may look. 
Open up the style.css file in our newly copied Acme WordPress 
theme and change the background color and font for the whole 
site. Hint: Look for the "Fonts” and "Global Elements” sections in 
the CSS file. 





誠 


This IS the ovigihal blog with 
tk defied 


TKc md'm doy>*tcy>*t -foy>*b av-c dttUrtd 

•m -this \rulc- I Vs d b*i5 list o-P scIcdW, 

bu 七 •七 dovcv^s mudh o-P *thc 'bf^oOjr^W^ 
-fov* *tKc si*tc- 




"the ov\ "the blo^, wc jus-t have "to pi£.k 
d new o^c- Iv\ -this dasc wc v/i-th ^eo^ia ； whidh - 
is one of ouv wcb-sa-Pc -Po^is. (Bd r^oie ： you C^y\ (\y\A 
oia 七 lots mo\rc oy\ Y/cb-sa-Pc -Po^is m Head Fiv-si Web 
Des 十…） 


h3#comments-title, 
h3#reply-title, 


.reply, 

.widget—search label, 
.widget-title 


font-family: Georgia; 


*tv>c badkyour>d Color IS cvcy> 

easier- |r> *tKc body sclcd*fco\r, all v/c Kavc 
-to do is add a di-ffcv-cr>*t Kcx.adcd*imal 
dolov *to badkyouy>d v-ulc- Hcvc, 

makes *tKc v/Kolc badkyouy>d 


Acme Bit Blog 



/* Main global 'theme^ and typographic 
styles */ 


body 


background : #ff3al5; 


You tBr\ look uf> Kc^adcdimal values 
easily oy>l*mc a*t s*i*tcs like 七 his: 

ivttf://K*tml-dolo\r-dodcs.tom/ 
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changing your blog’s look and feel 


WordPrcss uses stylesheets two different ways 

As we just saw, the main role of style.css in a WordPress theme is to tell your web browser 
how to display your blog. Colors, fonts, images, layout —— all those settings are specified in the 
CSS file. However, WordPress also uses style.css to store more “meta” information about the 
theme, like the author, version and a description of the theme itself. 



Style and presentation of pages 


The J CSS ih iVov-dPv-css is io tell 


body 


font-size : 62.5%; 



Resets lem to lOpx 




font-family : 'Lucida Grande', Verdana, Arial , Sans-Serif; 
background : #d5d6d7 url('images/kubrickbgcolor.jpg^); 
color : #333; 
text-align : center; 




Wb^Pv-css uses a blodk at the iop stylc.to -to tell tKe Aboard (a^A otW sc^ts) 

dcta.U about the tKcmc. dome the slasK a^d asW.sk / 决 1,kc ^ ,s 

决 A TKcy art i^ov-ed by bv-oy/sev-s bu*t l/V^dPws d 釙 use *tKcm *to display mWma 七 10 灼 about the 

duvvwt *tKcmC. 

Theme information and description 

卜 

Theme Name : Twenty Ten 
Theme URI: http://wordpress.org/ 

Description : The 2010 default theme for WordPress. 

Author : the WordPress team 

Twenty Ten 0.7 by the WordPress team 

Hhe 2010 default theme for WordPress. 

All of this theme's files are located in /themes/aerne . 

Tags: black, blu!e, white, two-columns, fixed-width, costo 
stickv^-poa^ translation-ready, mk reformats, rtl-language 

. w 


Vers j 

Tags : 
threa 
editc 

V 
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sharpen your pencil 


Sharpen your pencil 




Check out the CSS from the main Acme site below and identify 
elements that we need to use in our new blog theme. Look back 
at the exercise on page 63 and try to find the corresponding 
CSS rules for those design elements. Remember, the selectors 
(the word before the opening curly bracket) correspond to an 
element within the HTML in the main Acme site. 



iVc ky>ov/ >wc av-c *fco some s*tylc 
vulcs -fov* v/Kat is ddllcd body ov 
dorrtarrt av-ca o^c blo^—cspcdially 

-foy>*b av\d dolovs. l/VKa*t o*tKcv v-ulcs make 
-tKc s*i*tc look Kov/ *i*t docs? 


body { 

margin : Opx; 
padding : Opx; 

font-family : ''Helvetica” ， Arial , 
sans-serif; 

line-height : 1; 

font-size : 62.5%; 

background : #fff; 

color : #424242; 

} 

.wrap { 

width : 800px; 
margin : 0 auto; 

} 

.replace { 

background-image : url(../images/ 
sprite.png); 

background-repeat : no-repeat; 
display: block; 
text-indent : -9000px; 

} 


a:link { 

color : #424242; 
text-decoration : none; 

} 

P, ul, ol, li { 

font-size : 1.2em; 
margin : 0; 
padding : 0 ; 

} 

ul { 

list-style-type : none; 

} 

#header { 

background : #ddd; 
height : 50px; 
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#nav ul { 


.contact { 

float : right; 


background : url(../images/sprite.png) 

margin : 17px 000; 


no-repeat 0 -102px; 

} 

} 


#mast { 

#nav ul li { 


margin-top : 2 Opx; 

float : left; 


height : 130px; 

margin-left : 15px; 


} 

} 


#mast hi { 



float : left; 

#nav ul li a { 



color : #777; 


width : lOOpx; 

padding : 5px 15px 5px 20px; 


} 

font-weight : bold; 



} 


#mast h2 { 



float : left; 

#nav ul li a.active { 


font-family: Georgia, serif; 

} 


font-weight : normal; 



font-size : 2.4em; 

.about { 


line-height : 1.4em; 

background : url(../images/sprite.png) 


width : 700px; 

no-repeat 0 -128px; 

} 


} 

.products { 



background : url(../images/sprite.png) 



no-repeat 0 -76px; 

} 
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parpen your pencil 

^ SnhrHftn 


Check out the CSS from the main Acme site below and identify 
elements that we need to use in the blog theme. Look back at the 
exercise on page 63 and try to find the corresponding CSS rules 
for those design elements. Remember, the selectors (the word 
before the opening curly bracket) correspond to an element 
within the HTML in the main Acme site. 


f set i\st Wdatoy. W 

^ 叫却 e ▲ _ 

body { 

margin : Opx; 
padding : Opx; 

font-family: ''Helvetica” ， Arial , 
sans-serif; 

line-height: 1; 

font-size : 62.5%; 

background : #fff; 

color : #424242; 


wrap 


i 4 ^^ 一 " y/vap vulc is y/Ka*t 

width: 800px; keeps ouv site 
margin : 0 auto; •… 七 he C3i^ "t * 

七 his out. 


to\o\r 





a:link { 


color : #424242; 
text-decoration : none 


P, ul, ol, li { 


font-size : 1.2em; 
margin : 0; 
padding : 0 ; 


replace { 

background-image : url(../images/ 
sprite.png); 

background-repeat : no-repeat; 
display : block; 
text-indent: -9000px; 


list-style-type : none 


#header { 


background : #ddd; 
height : 50px; 


b^se,s be able to ^ It s so ^ 5 - d to use oUe, 
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iVc y/ill vcusc most o-r navigation \rulcs -fvom rmd'm 
htn\t site ； as y/cll be vcpladmj 七 lie cirtivc Keadiev- o-f 七 lie 
blo^ y/i 七七 liis same navigation. 


#nav ul { 


float : right; 
margin : 17px 000; 


contact { 

background : url(. 
no-repeat 0 -102px; 


. / images/sprite.png) 


#nav ul li 


float : left; 
margin-left : 15px; 


#mast 


margin-top : 2 Opx; 
height : 130px; 


#nav ul li a 


color : #777; 

padding : 5px 15px 5px 20px ； 
font-weight : bold; 


#nav ul li a.active 


about { 

background : url(../images/sprite.png) 
no-repeat 0 -128px; 


#mast hi 


float : left; 
width : lOOpx; 


#mast h2 


float : left; 

font-family: Georgia, serif, 
font-weight : normal; 
font-size : 2.4em; 
line-height : 1.4em; 
width : 700px; 


products 


background : url ( ../images/sprite.png) 


no-repeat 0 -76px, 
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selectors up close 


Stylesheets identify elements 
m your HTML 

Just because you have a rule in a stylesheet doesn’t mean that you 
have the corresponding elements in your HTML files. In order for CSS 
to work, both the HTML and the stylesheet have to be referencing 
the same thing. 


So all we really have to do is just copy 
these rules over to the new theme? 
And were good to go? 


#mast h2 


float : left; 

font-family: Georgia, serif; 
font-weight : normal; 
font-size : 2.4em; 
line-height : 1.4em; 
width : 700px; 


The # 你 as 七 sclcd*fcov'm 

CSS ma*tdKcs w mas*t w 
atbribu 七 e m 七 he HTA1L -f ile 

bcloy/. 


^ O u^ sses a " ▲一 4 



<div id= 〃 mast 〃 class= 〃 wrap〃> 

<hlXa class=’’replace’’ title=’’Acme Pixel Company’’ href=’’#’’>Acme Pixel Company< / aX / 

hl> 

<h2Xstrong>Acme Bit</strong> is a leading manufacturer of binary information units 
for the computing and telecommunications Industries</h2> 

</div> 




Will simply copying and pasting the CSS rules from the main Acme website to the blog just 
work? What aspects of the blog might differ enough from the site such that you might need to 
further modify your new theme? 





changing your blog’s look and feel 


Putting it all together 

Now that we know what CSS rules we need, let’s get our Acme blog theme 
looking just like the main site. 



k 刪 hm 

■V 

Cppe 


⑧ 






Download “Acmestyle.css” from www. headfirstlabs. 
com/wordpress, listed under the Chapter 2 files. 


Copy the original Acme site CSS to the new WordPress theme CSS file. 

Copy and paste the CSS from the main Acme site into the style.css of your new Acme WordPress 
theme. Be sure to paste it just below the RESET portion of the style rules (look for the “reset” 
comment block) — we want to keep those for consistency. 
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polishing your new theme 



Clean out some unnecessary CSS rules. 

There are a few rules in the Acme site stylesheet that will cause 
problems with our blog layout. We need to strip those out so that our 
blog pages render correctly. 



Reaps We 



#header { 

margin-top : 2 Opx; 
padding : 30px 000; 

} 

#site-title { 

float : left; 
margin : 0 0 18px 0; 
width : 700px; 

font-size : 30px; 
line-height : 3 6px; 

} 

#site-title a { 

color : #000; 
font-weight : bold; 
text-decoration : none; 

} 

#site-description { 

clear : right; 
float : right; 
font-style : italic; 
margin : 14px 0 18px 0; 
width : 220px; 

} 

/* This is the custom header image 

#branding img { 

clear : both; 

border-top : 4px solid #000; 
display : block; 


/* Main global 'theme' and typographic 
styles */ 

body { 

background : #flflfl; 


body, input, textarea { 
color : #666; 
font-size : 12px; 
line-height : 18px; 


fsc the %^d ，f o\r w sca\rdh w -Pcatuv-c ih Vou^ 

七 I 。乙 these \rulcs ahd v-cruovc 

~ Doh -t v/o 作 y 4 you 略 S up ahd 

㈧ Copied tk theme 

^ just go bad h> the 

VC-dopy the ov-igmal stylc.te. 


av-c v-ulcs dtUt ^ 

o\r'ia'mdl av\A masbead look. Mr fern 七 

v-emove tW»s Code, V/.II Co^\\d 

rules v/e added eavlier. /W, because 
av-c loy/cv- rn V.ll ocmdc a^y ^rulc 

i\\t same dass or IP. 
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changing your blog’s look and feel 



Clean up the header.php markup. 

Just as we had to get rid of unused CSS rules — we need to do the same 
for our markup. Replace <div id=“wrapper” class=“hfeed’’> and 
everything below it with the code below. (Make sure you’re in header, 
php and not index.php in the acme theme.w) 



Reaps Baw 

■T 



<div id= 〃 header-acme〃> 

<div id=”nav” class=”wrap”> 
<ul> 


^ putaUe i, ou, CSS -file 4 , ,aviaatio,, 

the HT/l/IL. 


li> 


Products</a></li> 


<li><a class="about" title="About Acme" href="#">About Acme</a></ 


<li><a class=^products active" title=〃About Acme" href=〃#〃>Our 


<li><a class= 〃 contact 〃 title=〃About Acme" href=〃#〃>Contact Us</ 


TWis sV^ov/s i\\t Company *m i\\t 

masthead at -top o-f W03. 


a></li> 

</ul> 

</div> 

</div> 

<div id=”mast 〃 class= 〃 wrap”> 

<hl><a class= 〃 replace” title=”Acme Pixel Company” href=”#”>Acme Pixel Company</ 

a></hl> 

<h2><strong>Acme Bit</strong> is a leading manufacturer of binary information 
units for the computing and telecommunications industries</h2> 

</div> 

<div id= 〃 main〃> 



」 


header.php 


parpen your pencil 


Everything is looking good so far, but we need a footer for our site. 
Below is some content for the footer — insert it into footer.php and 
create some simple style rules to get it looking presentable. 


Acme Bit Company - Handmade bits for the technology industry 
Home I About I Products | Contact Us 


small *t*i*tlc ay>d some y>av*i 
I'mks av-c all v/c v-cally need 
*tKc -foo*tcv. 
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parpen your pencil 

^ SnhrHftn 


Everything is looking good so far, but we need a footer for our site. 
Below is some content for the footer — insert it into footer.php and 
build some simple style rules to get it looking presentable. 


Acme Bit Blog 

About Acme | Our Products | Contact Us 


TWis IS V^ov/ i\\t \t(i side ouv 
footer y/ill look oUt v/c jet some 
w>av-kuf m *tV^c pv-opcv" plate. 


Y 0[ * need "to modi-py -Poo-tcv-.plip, move 
spcdi*(*id3lly ; "the ik>-(*o div wi"thiir> 
"the -foo-tcir. 飞 


Xsi 七 y/o pav-a^^rafKs (usm^ 七 he <f> 
element) is all >wc r\ttd bo Kold *tKc 
blo^ trtlc dy>d *thc v>av*i^atioy> Imks. 


<div id= 〃 site-inf◦〃> 


j 




<p><a href=’’<?php echo home url ( ' / ' ) ?>’’ title=’’<?php echo esc 一 attr ( get_ 

bloginfo ( 'name ’， 'display’ ) ) ; ?>’’ rel="home’’><?php bloginfo ( 'name’ ) ; ?></a></p> 

<p><a title=’’About Acme" href=’’#’’>About Acme</a> | <a title= ,/ About Acme" 
href=’’#’’>Our Products</a> | <a title="About Acme" href=’’#’’>Contact Us</a></p> 


</div> 




VVc put *m d <f> taj bclov/ tV^c blo^ title- 




footer.php 




Tesr DriVq 


Be sure to save header.php and footer.php, and then reload the Acme Bit blog in your 
browser. Let’s see how our new style is shaping up... 
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/Vow ouV" Bi*t blog is 

s-tav-t'mj -to look like the 
md'm s’rtd 


■9 


o 


Acm* Bit is a leading manufacturer of binary informs 
computing and tclccommunscatiDiis industries 


Olm Bi 

Pmvimi J 


Bit 愚 awa Butler 
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Dumb Questions 


Does CSS only work with 
WordPress? 

Nope, CSS is a web standard and is 
the primary presentation language on the 
Web. Almost every modern website utilizes 
it in some way and future releases promise 
even more styling power and effects. 


Why would I use a class instead 
on an ID in HTML? 

HTML has two ways of identifying 
elements: classes and IDs. The main 
difference is that classes are reusable, 
meaning you can have more than one 
element on a given page with that identical 
class name. IDs, on the other hand, must 
be unique and therefore can only show up 
once on a page. So, use IDs for specific 
naming and styling needs and classes for 
elements that you plan to reuse throughout 
your page. 


Do I always have to make my own 
themes? That’s a lot of work! 

While building your own themes is 
often fun and rewarding—it’s also a lot of 
work and requires a fairly deep knowledge 
of WordPress. If you just want a different 
look than the default—check out http:// 
wordpress.org/extend/themes/. This is 
the main source to find thousands of free 
themes that you can use for you blog. 
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an aside about the sidebar 

Everything looks good but the sidebars 

The Acme Bit Blog is coming together nicely and we’re almost ready to 
show it to Jay. Before we can do that, we need to clean up our sidebar a 
little. Because the main Acme site didn’t have a sidebar, there wasn’t any 
CSS for it. But we want to keep it in the blog — it’s a very standard and 
expected design element for most blogs. So we’ll need to modify the new 
CSS to make the current sidebar match the look and feel of the site. 


XKc ■tKcw'C -fov* looks ^^七 bu 七七 he 

Sidcbav—*rt Kas scavdKbo% a^d some I'mks or\ -top 

IS d b*i*t small domfa^red bo else OY\ i\\t 

1/Ve v /扣七 *to make *rt lav-^cv- ay>d v-emove some I'mks 
Aoy\{, r\ttd bo be *tKcvc- , - 


o 


ArCHW ij ■ Icwiinj^TBdBftirK^ircr u『&iiun mfuraulMja kwlJbf 
■cmpErtific wJ CrhnmimininlkvEi 1 ! ■iiun£iir > i 






Search 


Search 


Recent Posts 

■ Ou r Bits ore Better 


Uibtof aLakn 


Recent Comments 
Archives 

■ April i:uhj 


Categories 

■ CncateiKjriTffd 


Meta 

■ Site Admi n 

■ out 

■ EntrieflRSS 

■ {'jni meritfi S 

■ WordPteaaiai^;'' 


1/Ve dov^i Y\ttd i\\c w mrta” I'mks (v/c Aor!i v /釙七 
people ky>ov/mg \wKcvc ouv lo^m strttY\ isO av>d some 
cyuidk CSS should make *tKc s*idcba\r -f i-t m*to 

*tKc ovcvall dcs'i^. 
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changing your blog’s look and feel 


Update your sidebar cowtcwt with widgets 


Widgets are like drag-and-drop design elements 
that you can easily add to your blog. Aside from 
being a funny word, widgets are an easy way to 
customize content and the look and feel of your 
site without touching any HTML or CSS. 


The widyb scd*t*ior> is located 

\N\iW\y\ Apfcavair>dc mOrm m *tKc 
WovdPvcss ddskbodv~d- Hcv*c you II 
-fmd options -fov* s'idcbav* -roo*tc 
dovrt ⑶七 VidyU *too. 





you are here ► 
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widget 101 


Prag and drop widgets where you want them 

Adding and removing widgets from the different sidebar areas is as easy as dragging and 
dropping them into the appropriate place. You can add as many or as few widgets as you 
want and you’re in complete control over order and custom title options. 


^ Find the Widget settings in the 
Appearance menu. 

Because widgets are theme-dependent, they 
are grouped with other theme options. 



Add elements to your sidebar. 

Drag elements from the widget pool on 
the left to the sidebar container on the 
right. 




SpChd some time 
play'mg avouhd with 
"the sidebdir widgets. 
Thcvc is lots of 

di-f-fcircht ^Oh-tchi 

you Qh add. 




Add header and widget details. 

Each sidebar widget has its own set of files for customizing the look of 
the element. 



78 Chapter 2 





changing your blog’s look and feel 



kxefictSe 


Update the content and links in your sidebar, and then add the content chunk (below) about 
Acme Bit above it. You should be able to do all this without modifying any of the theme files. 


o Remove the “meta" and ''recent comments" sections from 
the main sidebar. 

We don’t need to show the meta information (login, etc...) to the world. 
Let’s get rid of that and the recent comment area —— we don’t have any 
right now but we can easily add this back in later if we want! 


Recent Comments 
Archives 

■ April HOUt 


Use >wid^C*t -fur>d*tioy>ari*ty 

*to vemove *tKcsc scdtiov>s 
-fvom sidebdv*. 


Meta 

« Sitl-e Admtn 
■ 啤 out 

■ fclntrles 

■ LommciniLs KJiS 

■ WordlYess-ors 


Ws” the s^wf»c v/idjet 
sedtioh d\rcatc a hew 
sidcba\r above the 

叫 … al and add ihe 

dopy below. 


Add the “About" copy above the 
main sidebar on the home page. 

Add the text to the right to a new sidebar 
above the original. That means you might 
have to move some things around in your 
widgets settings. Remember, you shouldn’t 
need to change any template files, markup, 
or CSS. 


The Acme Bit Company has been 
building quality bits for the 
computing industry since 2009. We 
are a family company that works and 
supports our local community-donating 
millions of bits a year to local and 
regional charities. Have a look at 
our products and you r 11 see firsthand 
why we are the only name is high- 
quality bits . 


you are here 
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exercise solution 



Update the content and links in your sidebar, then add the content chunk (below) about Acme Bit 
above it. You should be able to do all of this without modifying any of the theme files. 



Move the main widgets down to the Secondary Widget Area. 

After you remove the the recent comments and meta widgets, place the remaining widgets 
in the “Second Widget Area’’ by dragging them below the first. Then, drag and drop the “Text” 
widget to the “Primary Widget Area.” 


The pirWavy and secondary v/idje-t aveas display 七 he sidebav ihc same order 
you see \v\ -the dashboav-d. Smdc wc move ihc widjei av^eas we t\ttd 

•to rwovc "the v/idyt dovm ms 七 edd. 





Po^*t *to vemove 

dy>Y u^y/a^-bed VidyU. 
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changing your blog’s look and feel 



Add the sidebar copy to the the Text Widget. 

Copy and paste the About copy into the text box of the “Primary Widget Area.” 


By *tKc dov/Y) av-vo\w \y\ 七 he 

y/id^c-t you cv>*tcv- d t’rtlc 3 iy\A blodk o( 

七 ha 七 will appcav- *m i\\t sidebar. 1 /Vlc ^or!i 
mdlude a trtlc Kcv-c, jus 七七 lie 七 ex • 七 . / 


Oi\Ct you save av\d navigate ba^k ou-t b> 七 he 
home pajc, you should sec -the new iwo- 
sedtio^ sidebdir. 


't% AyrJt hi'fi' tn 


Ti'sl 


Tht primary j/m 


HUB ： 


llie Acme Bit Comp any has been building 
qu d Lty b its for the computing indu dry sin-ce 
2 tic>y ■ We are a family ccamp any th at works 
and supports cur loci] ccanmu nity-donating; 
millions cf b Lts a year to locd and r-c^-orifll 
charities. Have alcok at our products and 
youll set ft ret hand v^iy wt are th^ only name 
us hi^h-qual Lty t Its, 


THh 1 Aimn 1 Ril CnmFuny h.i^ hp^n huikling [^u.iEiEy hil& Uir £Iii l 
ind«J5Ery sme? 20M. We a, f^milv company 
thaf Wporki md : support our local €&mmunitv-donatinig 
millions oF bits i ysit co IdcaI ind regional thiriEiles. ■ lave a 
l[M]k >j 【nur prncTui t m . .mid ychuMI n Fi'rvt 1 hjinid why wf .irr th<r 

onlv name Ie h_h-quality bit£. 


Search 


Search 


Recent Posts 

■ Our Bits are Better 


n AumrtiAN^IIy Afld p£irRg ； Rj^i^ 


rSrlmM C\mf 


Archives 

■ April is mu 

Categar^s 

■ L'ntatc 职 ciscd 
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test drive 




fSST Drivq 


Now that we have the new widgets in place—let's take the Acme Blog for a spin. 


A ^ A 


As rim CiE 




EZ3 o yRt - 故 


Acme is a leading manufai^orer of binary inforumtion units for t^e 

computing and telecommunications industries 


Our Bits are Better 


*Aa ，，_j 

,ui^ Han jgMiiliTH ■*» 
1 HV, Vi tmd 4 ji>-q 1 b 

prill -，■■■■■_— wkammMm§ 

■ilftaiH J !■!■ ■ mu hi LnJ siflrii n^HH aJ 

•ckmam i 4 ivi ifd 

m.Hafl InkHid htf^i wiEfcf 


Search 


■ r 鰣时） 


AJ: Aoi^oll kno^ ktc IfaitF. W&Vf bcca |,dLii| 14 
in ih^bu! i^ilLlitry tQ Wf i«H 1 Wld ItlMl ftbrnh i:i i:lei jie-^ 
viur 16 . 3 S ind o^ddjfc ( 

■ F|4Ajfu>> lnCtiMC&. IL \ 

■■ P'uialik^^iKlh'UlLi? Irjd^alixfcwlinE i^asdanb 


jJ^bdlLb lcdbatr]rk«UnE rtasda 

n niL^ai 泌 i^ua 


Those widgets sure made 
things easier, but the font 
size still seems different than 
everywhere else on the blog. 
Shouldn’t the CSS have taken 
care of that? 


Why might the sidebar font not be fitting in with the 
style of the rest of the blog? 
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changing your blog’s look and feel 




r 


SIDEBAR CONSTRUCTION 

The new theme and content are in place but the original Acme site didn’t have a sidebar — 
so it didn’t have any CSS related to sidebars. We need to write some custom CSS to make it 
really fit in with the new theme. 


The Acme Bit Comp any has been build Lrvg 
qu ality bits for the cmiputirvi; Lndu Etry since 


. We ax-ea family ccrop any th at wcrlts 
and su pports cur loc al c cuitn u nity -d -dii ati u.g 


millions of t its a year to local and n^cna], 
charities. Have alook at our products and 
you II see first hand vihy w are the only nam^ 
is high.-qu al Lly h Its. 


Search 


… Search 

^ ur 


Recent Posts 

■ Our B Lis ar-e Better 

Archkves 

■ April auiLj 

Categories 

■ L"nt atc^orizcd 


Look -fov 七 his vulc m *tKc s*tylc- 
dss -file dr>d mdke some *to 

impvovc *tKc look o( *thc sidcbav*. 


#main .widget-area ul 




TKc md'm issue v/rth *tKc sidebav- 
is *tKc sizjC 一 i*t smaller 

i\\av\ *tKc vcs*t o( *tKc blo^. 


The dopy is also a b'i a b musKcd *to^c*thcv-, 
•rt dould be Sodded ou*t a b*rt rwo\rC. 

Look a*t *tKc CSS v-ulcs bclov/ *to Kelp 
you dome uf v/rtK 3 solution- 


Use i\\t CSS a*t*tv-*ibu*tcs below *to add 
some s*tylc *to *tKc v>ow sidcbav*. Chcdk 
ou 七 ivbtf://>w>w>w v/^sdV>ools.tom/dss/ 
dss__vc-fcvcir>dc.asp *to lcav-v> move abou*t 
v/Ka*t *tKcsc pvofcvtics do. 


I 






L 


J 
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construction solution 


SIDEBAR CONSTRUCTION SOLUTION 

The new theme and content are in place but the original Acme site didn’t have a sidebar — so it didn’t have 
any CSS related to sidebards. We need to write some custom CSS to make it really fit in with the new theme. 


l/Vc bo *mdv-casc i\\t s*iz^ *to i\\t 

-typo^vapKy oy\ vcs*t o( *0^ s*»*tc* 


Search 

' '(Search) 

Recent Posts 

■ Out Bits arc Better 

Archives 

■ April 2010 

Categories 

■ Uncategorized 


#main .widget-area ul { 
margin-left : 0; 
padding : 0 2 Opx 0 0; 
font-size : 1.4em; 
line-height : 1.4em; 

} 

#main .widget-area ul ul { 
border : none; 
margin-left : 1.3em; 
font-size : lem; 
padding : 0; 



0u,r already has a .widest - 

avea ul rule -for bullets, so all wc heed b> do 
' s a irulcs -to r，akc the W a^d \Jt 

ncight a bit bigyv". 
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The Acme Bit Company has 
bsenbailding quality bits for 
the computing industry since 
2009, We are a family 
company that works and 
supports our local 
community - donating 
millions of bits a year to local 
and regional charities. Have 
a look at our products and 
yo uTl see first hand why we 
are the only name is high- 
quality bits, 


These CSS additions should made ouv 
s'ldebav- d mov-c pv-cscy>*tablc—or>dc 

y/e yt some move fOS*U *tKc S*l*tc, l*t 
will look CVCy> bettev. 
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your new custom theme 

Owe theme to rule them all 

You’ve just created your own custom theme for the Acme Bit blog, and it looks just like 
the main site! Time to let Jay take it for a spin... 


\St added CSS a\r\d HTML 
added 

ar\d mas-t^cad. 


Wc dlso b\rou<\K*t y>av*ifta*t'ior> 

Ud 七 h 


ovcv so 


七七 ouv V*lS*l*toVS dould 
*to *tKc mdm si*tc* 


*tV>civ v/ay badk 



hi. hau i I 


JiHh 





❹ 


O 


Aemc Bil is4i kudins. ma^ufuKturcrucf binary Lnlonniitiun urub fur tbt! 




ooniputing and tele 


ng hulhuie 
icomniuni 


nicatiaai£ indii!ilTje& 


Ovr Gto « B«l 


tt*r 


32 


64 


^WmhaiWdM 


― 酽 


Af Amv, ill •^lasam mt'baRiLlfi'i'yr brrn|pTn |； Id pnE ki^jhi \ti brh^lhr lM! EilcfC 
ip Lhi b>L uajurlry pk ^puxk HiJlhid liaoup la pw pnidKi.. |hf nw fuL^imi 

HldN bll *WC-kll-! 






罾 1 wte9i 


vuJftfU] 

Hu MHpmftUuiTiBri^ 

IW^I 

mepi^i lL«l "rCf^li^Kl 

iff iwrf 
Jbcui^i 

n_ra ECbtai<_ Lacd 

ip4I pM "AK m Hb— 

■ikHkri wpr^JUa ■! 
酬 _ 4m _ hi 

綱 ik 


■ Ow^rliirrlTfln' 


AiChim 



All V/C V^ad -to do -for tv^c ^ootev v/as add 
some t%bra 議 L ad 乙丄 t. 丁 ^ CSS = 
bvo^t ovcv- ^v-orn tv^c Site made i-t look just 

V"’ 吵七乙 ally. 


we added a hew sideb 沘 ^ a 
sidcba\r Widget a^d updati% < 
stylc.dss +ilc to r^akc it look like the 
V"cst o-r the blog. 


ouv- 
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changing your blog’s look and feel 


Your WordPrcss Toolbox 

You’ve got Chapter 2 under 

_ your belt and now you’ve 

added themes to your tool box. 
Next up, moving beyond the blog 
to see how WordPress can help you 
manage a whole website. 




BULLET POINTS 


■ WordPress uses PHP, HTML, and CSS 
to get content to the visitor through their 
browser 


■ 


■ 


HTML is the language of the Web and is 
used to “markup” content with meaningful 
tags which then get interpreted by a web 
browser. 

CSS or Cascading Style Sheets are used to 
add a presentation layer to HTML and allow 
you to change the look and feel of plain old 
HTML. 

■ For every rule in CSS, there needs to be a 
corresponding element (like a <p> tag) in 
the HTML. 


■ WordPress themes allow you to change the 
style of your site without changing any of 
your content directly. 


■ 


Sidebar widgets allow you to dynamically 
add and remove content from your blog 
sidebar. Some themes support more than 
one sidebar widget. 

■ You can download 1000s of free WordPress 
themes from the Theme Directory: http:// 
wordpress.org/extend/themes/. 


l 邑 PH. VIP 
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3 content management With wordpress 



Gentlemen, we have a lot of 
stuff. How are we going to 
keep track of it all? 


參 Beyond the blog* 


You’re starting to outgrow the blog. 

Maybe your business is growing, maybe you need more control of what shows up where 
on your blog, and when. Luckily, WordPress handles a lot more than just chronological 
blog posts. We’ll start to tap into its content management system capabilities by 
creating static pages like on a regular website, adding navigation for the new pages, 
and changing the home page of your new site so it isn’t your blog. Get ready to build a full- 
fledged website practically without writing a single line of HTML or CSS. 


this is a new chapter 
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growing pains 




I hate to ask again—but 
now I need to update our 
main site. Some consultant 
built it for us years ago 
and I have no idea how to 
make changes on it! 
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content management with wordpress 


E^k ： 


KXf H* pv 





64 


^ __ J 

|g4 Miail-toteM 


M iAAi ll-rti bAfrs Mi，kflJi Wi\r krt« M 

hdU _ fetM UiAMlib fckii%* Lfl d«i p 

•A^iMP 本 J1 kM U kl BUdtaft. 


irn^v I 


ii ui*m 

■ 'Am MW iHr^rrf 


mlHitaiw. 
—— 


■!^k« 




o 


mrf 


euifl 

biWMiflt 


Acme Blog 


1/Vov-dPv-css adis as a laycv- bcWc^ you a 灼 d 
-the ttTMU CSS, ay>d dodc *tKa*t v-uy>s youv- srte. 
I 七 ^Wes you *familiav" m*tcv-fadcs b> Coptic 
dommo 灼 tasks o 灼 youv v/cb pa^cs. - 





J.iL 


O'a 


lOai 


O j&£flW Bdi m rrLmu|fpui£cn:『qf luBify t va kKEJii 【 in ^ 

fuf llfii rnr:prtln|j mrui l uhn^: x eej nka|ii eoi tnhnMrim 


32 


64 


hkMr ^pb^|h 4 — pi 

_—■ uj kw ■ 和 ■ju" eT tom v ■^ww ^aai iM ,■■::■ 

■■■h mpv BBpbi iJ kh hA bhp vhbb H^fu Bwai.. w^m ■. nnv mmmm m 

Mi - mmM MT ari'hJI ■!'mmM* B-ftv" i 


Main Acme Site 


Ouv A^c Blog is ma^ajed by WovdPvcss. 
iVe da” add do^ic^i and make 

"to "the look dhd -feel v/i'thou't cvcv* 
■fcoudhmj a^y Code oy markup- 



TV^c ma'm s *'*tc is just w staW - 払⑽ 

,S r.o -tool bo v^clf us rnawy cvcrytwj. Mr you 
y/a^tfe> 乩 a 哼 somctWn.3 you v^avc to the 

Ale m a cd»W a^a dV^a^c tV^c ttTMU C ^， 

dr\d 乙 orrteir\t 



No 七 ewyo 於 k^ows HT/WL-ov cvci. wa^ts -to. I^ithoul WbvdPvcss, OV some othev -tool, 

^ ^ P co P lc ^kc dha^cs io Ihis. youVc a big a^d have 

10,000 pages? You see this wcbsi-tc v/ould be di^idul-t io 一 age by ⑽代 ihan a 
+cw People, a^d Jay docsi.^ have ahyohe oh siaU ai hc^t {p help him his siie. 
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content management 


WordPrcss is a content management system 


WordPress can do way more than manage your blog, it’s powerful enough to control all 
the content of typical website. Technically, all blogging platforms are a form of content 
management system, but WordPress makes it simple to build full-featured websites on top of its 
posts, pages, and themes. 




add tor\icv\i, Ways, av\d v, dco 

•to Wov-dPv"Css wwacM do 

ov-d pv-otess'm^ svs*bcws like 

rosJtlA/ovd ., 


IV\\Cx 



m\ 



乙 。灼七⑼七 system 

u s a "to ofcv-a*tc 

a move tomplc% sys*tcm—*m i\\t tasc 

Wb^rdp^ss, Y/cVc usmj d Wov/sd 




1 /Vbv-dPv-css is made “p o*f a 
da*tabasc h> s-tov-c ouv- 
扣 adimm sd\rccK> bo edi 七 -tha-t 
乙 。的七 ⑶七 and dorwpu"tcv- Code 

ihai iv-a^slaics i-t m-to HTML 
CSS "that be viewed 
by a web bv-oY/scv-. 




HTML 


CSS 



WordPress publishes ou\r {o ihc v/cb *m Co^ov\ *fovmais like 

(iT/V)L a^d CSS 一 "the same "tools used bo build v/ebsi-tes. So you use- 
l/VovdPvcss -to build a whole si-tc of ttTAIL pays, jus*t B blog. ^y\d 
you do〆 七 have -fco be ttT/WL whiz, io do it. 

A content management system allows users to ectit wetsites using 
iorms anct worct processor-like controls instead ol moctiiying HTML 
iiles anct cocte ctirectlv. 
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content management with wordpress 


WordPrcss has three mam management sections 


O 


❹ 


❹ 


Content 

We already know that WordPress can 
handle a blog post but you can also 
create pages, add lists of links, and 
upload media to include in your site. 

WcVc *to oy\ -fov* 

VilUelf us y 七 mam 

s'i*tc w'ovcd m*to Wov-dPws. 


Structure and Organization 

WordPress gives us tools like 
categories and tags to help organize 
our content. Pages also help us build 
heirarchical structures within our site. 


Look and Feel 

Finally, WordPress gives us built-in 
themes (and the ability to make our 
own) so we can make our site look 
however we want. 


so "thcv-c 3 -few move 
scd*tio^s -fco l/Vb\rdPv*css 一 bu*t "thcyVc mos-tly 
s, "tc scttmjs so well ij^ov-c 七 hose -fov now. 
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|harpen your pencil 


Take a look at the current Acme site and write down all the pages 
we’ll need to move over to WordPress. You can view the Acme site 
at http://acmebit.com. 
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pages are a lot like posts 


^harpen your pencil 

Solution 


These arc all -the 
ihai duv-v-Chily 
v-csidc oy \ -the md'm 
httr\t si-tc- V^>u 
pv-obably "Pound -therw 
by dlidk'm^ -thv-oujh 

"the side’s 灼 aviytio 灼 

Imks. Well t\ttd -to 
jci -these pajes oMtY 
"to ^VovdPircss. 


Take a look at the current Acme site and write down all the pages 
we’ll need to move over to WordPress. 



- "1 

Standard Bits 



WordPress pages are just posts "outside" the blog 

WordPress allows you to create a special kind of post called a page. A page does exactly what 
you might think —— it adds a new webpage to your WordPress blog, which then is really turning 
into more of a website. By default, WordPress ships with an “About” page that you can take a 
look at to get an idea of how a page looks in your dashboard. You can add as many pages as 
you like and they can be used to build a whole additional site around your blog. 
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content management with wordpress 


Pages arc the backbone of your CMS 


Without the ability to create pages, WordPress would just be a blogging tool. Pages are 
obviously important for providing content, but how you name them and where you store them 
within the WordPress file structure also impacts the organization of your site. Helping you keep 
track of all that is part of what makes WordPress a true content management system (CMS). 

Mos*t 七 you v/ill sec 

W dor>*tcy>*t mawy 眯 arrt system 

abbvcv*ia*tcd as CMS. 



TWis did^dm sV^ov/s i\\t of pajes 

cm a v-cally simple site also V>as a blo^ \ 
\iJ\x\s is also tailed a brtt, oy 
art\\\itchArt f diajv-am. But v/V^o carts —a 七 
•,Vs dallcd-iVs just \\trt -to v^clp us stay 
or^d^izjcd- 



/blog/post-1 




/blog/post-2 



/people 





The home page is ai 七 he -top o-f 
■the -tircc—i-t^s v/ha-t loads when 
someone "types ih youv- URL 
(like www.adirwcbii.dorw). Evcv-y 
oi^cv- pajc you dv-ca-tc is jo'mg -fco 
jci iis oym unique URL as well. 


/contact 






L 

: 

L 

T\\tse pa<\cs av-c Y\t%i / 


bv"ar\^V) m ouv* s'i*tc s *brW. TV^ 

sV^oy/ u\> a-f*tcv- ma'm URL 
like y/y/y/.atw'cb'ittom/ 
so v/e abbv-cv*»a*tc v/V^\re, 
-tV^cy IWc as jus*t W / - 




Do you know wha 七七 he URL 
-Pov -this page v/ould be? 


r 


/blog/post-3 


• • 


posts art jus 七 maw'idudl fays i\\ai fladcd v/rthm 
-tKc of youv bloj. AH youv posts will appeav 

ur>dev- /blog m youv srtc s*t\rud*tuvc. 
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add a new page 


Adding a new 


just like ai 



Select Add New from the Pages menu. 

This will bring up a new empty page that will 
look just like the “add new post” page. 




Preview and save your draft. 

Once your title and content are in place you can 
preview your page before you publish it for the 
world to see. If you’re not quite ready yet, click 
“Save Draft’’ and you can come back later and 
finish things up. 
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a wgw post 



Add a title and some content. 

You can use the visual editor or code editor and 
HTML is allowed in the page (also just like a post). 



o 


Publish when youVe ready. 

You can add images just like in a blog post, and 
thanks to the CSS work you did earlier, your 
page will already inherit the style of your blog. 
Once you hit Publish, your new page will be 
available on your site. 





content management with wordpress 


WOKDPRESS CONSTRUCTION 

Use the pages you wrote down in the earlier exercise as a reference and add new 
pages for each content section of the Acme site. 





Pont delete w Abou*t w 

f 心呼 七 ^ 
title ar\d ar\d 

you've alv-cady jot emc 
added! 
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building new pages 


WORDPRESS CONSI 1 UJCIION 

Use the pages you wrote down in the earlier exercise as a reference and add new 
pages for each content section of the Acme site. 



Ed A pay should sV^oy/ uf m the 
Pays list a^d a y/ill be 

dvd'ildblc bo sec »*b looks like 

•m site. 




O fcri 1 i;ii ■ luiLfumTHr^ri I 

KAJ IfhWftJI Mini MifiM kaflw klJ 


Discussion 


2 Allow 
^Allow 


Camments. 


Ilow tradebacks, and pingbaefes. on this page. 


Make suve you disable 
by 

W /\Ho>w CorwrweKrts" 

"the bo-t-fcorw o( 七 he new 
pajc -fov-m. This way we 
won 七 ^C"t 3 dorwme^'t *Po\rrw 
oy\ ouv pajes -thai may 
do^-fusc people—you oY\\y 
>wa>vt "thcrw ov\ 

youv- bloa pos-ts. 
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http^acmcbit.com/Tpageid^?. 


All of the pages are there but the 
URLs for each page are showing up 
with numbers and question marks in 
them! Weren’t they supposed to look 
like /contact and /about? 


That is a pretty ugly link. And it doesn’t tell us much about 
the page, either. 

URLs are an important part of the Internet. They are the street addresses of our 
favorite sites on the Web. Because of this, we want them to be easily memorable. 

A link with a bunch of question marks an equal signs is tough to remember — our 
brains don’t work that way. We like to see links that have human-readable and 
speakable parts so we can remember them. These are called “pretty permalinks” 
because they look and sound nice. They also serve another purpose —— they can be 
like little bits of meta data tucked away inside your link. When you see / products 
you know exactly what to expect on that page, before a single pixel loads. Pretty, 
usable URLs make the Internet a happier place. 


TV^c 二 23 IP i\\ai 

*m our database. TWis is jood W the 

乙 omfuter, but very 




O 


_ 

+ 

h 

0 http://acmebit.coni/ 7 pageJd=Z 3 

1 




Thai’s move like it A Imk I dan really 
Y/vap my dv^ou^d- 


Pretty permalinks make life on tke Internet easier hy 
giving visitors a readatle, memoratle link tkat reflects tke 
content ol tke page. 
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pretty up your links 


Make your URLs manageable with permalmks 


By default, WordPress creates links for your posts and pages using syntax that ends with 
something like this: ?p=xxx . The “xxx” part is the number of that page in your database. You 
can change this setting by selecting a new “permalink” structure from a list in WordPress. The 
“Day and name’’ option is one that you see on a majority of blogs because it gives you date 
information along with a title in the URL. 



■ 

I 








I ULI SM4 Hri 
ariii i 


1 AC H i ■ 
■ tkm mi f 




i ■ iMh U-H+M l tumg- 
_ km i, I - *r ^ 


a—» • 


■■H »»»*〜 IILi* l>i 


I .<■ fan ■■ b 
I wmm 1^— I 


Wov-dPv-css jives you 
乙 orrbrol ovcv URLs 
*m Pcv-malrnk 

U) menu 




TKc dc^ul-t sc-ttmg Will always display fosis a^A fa^cs by IP *m -the 
daiabasc. A^y otKcv- 父七七 ••呼 Will br\^r Ytii) URU W fays 

(/pirodudis, /Coy^iacA) a^d *thcy> i\\t spcdi-f icd URL stirudWc i\\c posts. 


Common sellings 



ti t Lp ^/^flcniebil r <csii/7p-123 

C tidy and 

http p //ariif-hT f 1 ： £111/7 典 1 p 

E^JiMcmlh And r&.i mr 

hkLp. //iy Lfieb l ( . cqm/Z#lfly■ e_ pyL t/ 

nitric 

lit tp :/ /ftenebi 1, cor>/ar£hi vax/12 J 




、 —-- 


I*P you want, you add a dus-tom 
s-tv-udiuv-c and make uf youv ovm 
pcv-rwal'mks. To Ic 3 v*>r> dbou'b "this 
-rcaiuvc, dhcdk oui "the WordPress 
Code%' Ivt'tp-/ / dodc^. y/ov-dpv*css.ovg/ 
Usm ， Pevmalmks^Choos’m ， youv 
pCV-rwali K>k__s-t\rud"tuV-C- 
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content management with wordpress 


Permalmks arc handled by the web server 

Most of the work to make your URLs more attractive is done by the server. The web server 
looks at the incoming URL, like acmebit.com/contact, and compares it to a set of rules it 
has on file. If the URL matches a rule, say “? p= 123 is the same as /contacts”，the web server 
would route the request to serve up the appropriate page based on its database ID. This process 
is called rewriting and it’s usually handled by code called a “rewrite engine.” WordPress steps in 
to automatically change the links on your site to point to the new, more readable URLs. 


A v*is*i*tov- *to you\r site "types 
m a URL *m b\roy/scv-. 



HI 


Web browser 



HTML Web page 



http://acmebit.com/products 


The Ivtaddcss -file is 
whcv-c you s-fcov-c -the 
V"ulcs -Pov- -the v-cv/v-i-fc 






TV^at URL *»s 

{jo OUV- SCV-VCV- a\r\d OUV- 

V"Cv/V"Vtc uses 

-file, is also 

s-tov-cd i\\t scv-vcv-, *to 
■take a look a*t l/RL. 


圍 


.htaccess 


The web scv-vc\r sends -the 
appv-opviaic pajc -to -the visi-tov-^s 
bv-owsc\r, m 七 his dase i 七 se^ds 
hiip ： //adrwcbii dom?p—IZ?. (H 
still shows -the URL with 七 he 

pewal’rnk ’m "the address bav 

"the bvosy/eir, -though...). 


、阔 

J. I 

H 


Web server 



•ivtaddess ： 
/p\rodudts » 
/ » 
/ abou-t » 


?P-/Z? 
? P : IZ 午 



Go into the Permalink menu and modify your settings so that posts and pages can have pretty 
permalinks. Start with the “Day and name” permalink setting as that is the most common format 
on blogs. Then go to a browser and navigate to the /contact page at your site’s URL 
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asking for permission 

Page Not Found? 

Now that we’ve selected the permalink structure that we want for the Acme site, we should 
be able to browse to a page by title (/ contact) and see that page in our site. Sometimes, 
however, the new pretty URL will instead display a Not Found error. These errors occur 
when the server can’t find the file being requested based on the URL. Depending on jour host, 
your permalinks may or may not work at this point. If they do work, you can skip this next section (or stick 
around and learn about the .htaccessfile). 


_ : 






* 


办 Al.cuc Hsl 池名 


CM 




琴 ii ikii^ mtei Ml 4 pi 

P* -am Wl> «|fii 两琴 !!■ _ vmm ■ WTfl 

IM MWi'lH IMifPiWb HtalW _ 厕 __ M iHTH^iia nliMPr. M 

— _d ha. •_ i ： ; io»a iu 胃 _b is ipi ym uw 

Coimm#n ulilnDh 


■ r 


I 

Wfc -flipped *tV^c v-adiio Wtto” 
■to w pay ay\d r \ amc w 七 
saved t^a^cs. 


^Dav and n^niE 


t r psntfc-/ 


"OhaHKi 
n Cavt i^vi b 
Clplvifui 


M PBl 




it 匾 bl 響 |V|I X^MJ^ p rEf W U 8 .l^n'Slf..|；VLL PHF1 I, 

I^HpJTV hH mip "Hf H J IJdi^ H rfliflA rv tJl'Aill 


r |M .''B1AE1H Nff rnfm — A Ah i 

ttagk * _ pm f pi k 4 t§ tflpn +1, 

■ rfilUb』■ rrn^m^ i - 
imiHnrlngni i— 

PwBJiftr^N . 

■«T#raB*T ^ M3 ■ Mi 
h wf^-s^d t nOiJLir ■UHWIi ^ 


,hM i bp 



|-f you look a*t bo*tW 
o^f i\\t fcv-malmb paje—you II 
sec 3 message *tclU us 

ouv ^-ta^css -f ile did^t jc*t 
\/vittcr\ W *to, mcar\S \i 

didn't y 七 ufda-ted Vrb ou\r 
pcv"malmk \rules"" 


l*P we *tv*y dK>d o^o "to ouv- v\t^i 

URL, we jci a pajc ⑽七 

(o[AY\d CV-V-OV—l^o-t ^ood... 



I^Vo\rdP\rcss C.Sy\-i add \rulcs because it 
^odi-Py -this -Pile, so H^k-t 
ou\r plrctty URLs do^i wo^k. 


how 


htaccess 
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content management with wordpress 


Mmdmg your .htacccss file 


If WordPress can’t write to, or modify, your .htaccess file, it can’t make your permalinks pretty. 
Normally, your .htaccess file is located in the public html directory on your web server — 
sometimes called the website “root” directory (this is also where WordPress is installed). Some 
servers may have special rules that allow that file to be located elsewhere (and some servers 
don’t have the file at all). Since WordPress might not be able to add those rules because it can’t 
write to the file, we’ll add the rules manually instead. 



public—html/ 


.v^tatdess -Pile JOCS *m youv- publid wck 
div-ct-tov-y—same as 
o\r 



The Ivtaddcss -filename stav-b 

為 d<yt (.) -Pov- seduv-i-ty 

veaso^s 扣 d so -thcyVc ^o-t 

aaideivtally ddeied- Because o*P 
七 his, -Piles iha-t s-tavi v/iih doi 
w *mvisiblc w when viev/'m^ 
youv -Piles m you\r FTP die^rt. 


.htaccess 



FTP dierrb usually V^avc 
option bo sKov/ ov Wide mvisible 
-f iles. Vou only v\ttd -to V^avc 
七 )^«\ visible >*(■ Y®'* ir\ccd *to 
mod'i-fy 


Other WordPress files. 


TKcsc ^ Imcs o-(* dodc (v/KidV> you tdiy\ •… 七 he 

WovdPv*css pcv*malmk morm m youv* d3s^boavd) 

y/'i|| *bo 3*t *to^ o-P youv .ivt^ 乙乙 css 

*tKcyVc *tKcvc, youv pcv-malrnks should >wovk as 
c%pcd*tcd- 



Watch it! 


<lfModu!e mod_rewri 
RewfkeEngine On 
RewriteBase / 

RewriteRiile A index\.phpS - [L] 
RewrkeCond %(REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRyle . /index.php [L] 
</lfModuIe> 


Because most 
operating systems 
hide “invisible” 
files from you, the 
.htaccess usually doesn’t show 
up on your own computer. Copy 
it in your FTP client and rename 
it to htaccess.txt (no dot in front 
of it). Download the .txt file to 
modify it on your local machine, 
and then rename it to .htaccess 
again when you upload the new 
version in your FTP client 
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exercise solution 



Go into the Permalink menu and modify your settings so that posts and pages can have pretty 
permalinks. Start with the “Day and name” permalink setting as that is the most common format 
on blogs. 



Create and open your .htaccess file. 

In your FTP client, create a file called .htaccess in the public html folder 
(if it’s not already there). Then open the file in a text editor. 



.htaccess 


\y\ some dases 七 iVis -f ile will alv-cady be 
Kcv-c—y>o b*i 5 deal- 0^tr\ up 七 he -f ile 
a cdi*tov- ay>d skip *to s*tcp #2*. 




Add our rewrite rules. 

Paste the rules we copied from the WordPress 
permalink menu into the top of the .htaccess file 
and save. 


<IfModule mod—rewrite.c> 
RewriteEngine On 
RewriteBase / 


RewriteRule A index\.php$ - [L: 


RewriteCond % {REQUEST—FILENAME} !-f 
RewriteCond % {REQUEST—FILENAME} !-d 
RewriteRule . / index.php [L] 


</IfModule> 





If you are having 
problems getting 
your permalinks 
working, head 


over the WordPress Codex 
and read their detailed page on 
Permalinks and URL rewriting: 
http://codex. wordpress. org/ 
Using_Permalinks. 
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content management with wordpress 



tKereiare no o 

Dumb Questions 


Why doesn’t WordPress just call 
itself a content management system? 

According to their website, 
WordPress is a “publishing” system, 
which is really just another phrase for 
content management system. The reason 
their mostly known for blogging software 
is because that’s what WordPress was 
originally created for and that’s where 
they built their following. 


Is there a limit to how many 
pages and posts I can create? 

WordPress can handle hundreds 
of thousands of pages and posts which 
would only be limited by hard drive space 
for the database and server power to 
serve the pages. You’ll most likely never 
reach the limit of WordPress’s capabilities, 
and if you do, congratulations—you’re a 
web rock star! 


I don’t understand anything 
inside the .htaccess file. Help!? 

That’s OK, once you add that 
code to your .htaccess you’ll most likely 
never have to look at that file again. All 
you need to know is that code is for 
WordPress and it needs to be in there for 
your site and pages to work properly with 
permalinks. 
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we need content 


Puild your pages with the visual editor 

Now that we have our pages added and the permalinks in order, it’s time to get the copy from 
the original Acme site over onto our new WordPress-powered site. To do this we’re going to 
revisit the visual editor that we learned about in Chapter 1, and we’ll dig in to see a few more 
things that it can help us do. 


UptearfJl'isen *j uE j? • 




V^iujI 1-TTWL 

B I ^ ii 1 

p ； « m 

'H* ^ 

〜 _j ■ 



WaTi 

Wafd teutli E> 


Lul idiltd faf jum^dmn Apiil 22, g I'fll'Q 5 19 pm 



TWis is dc-fault visual 

edVtoV" y/ill 3llov/ you "to 

£.om^>ose fays t\ost *to 

y/ill look published 

cm the si-tc. TWis is ⑼ 
v"C-Pcv"V"cdi "to 3s 
you see is you jet ov - 

|/\/yS|l/Vy^ (sounds like 

w wWiz*z*Y>wi<) 


viev/. 



"The kitdhch sihk” bu't'toh will 
add ahotklr \row -fco the visual 
edi"to\r mchu givi^a you mov^e 
optiohs modi-fyihg the text 
ahd pav-agv-aphs m youv- page. 


jiT: « 

- IJ it * jfr 4 fi H UP u 

lit Ifit, wt fn£^i pn 剛 nly rm ■TlnMU' Ki|i- -th# hiuih 1 ietiiJ 
infirirmilLqn.fhvf Ihr 1 p^l: s'tjlt wf Knv psqifrimrndir^ villli si i/jf^rjvr^ k\m\ nf hit 1 , n 
ifuanflun fail ar qubit QubiEi luvr iiujti' aFlbtf umt j diarixIrTbEJoh m hLla in thiE l\my 
ran Iw an Iww sGlIffrimC s-IjAvil uiM or olT. I Iotht^'w, Ibey huV? nn eilrn s4a[c railed _ 
MjpCTpoiLlimi whJch ii sippciii lo ifunnliiri fails uni arpri^rflj ii Ijh^at a[ O amd I 


VUi 


Wo Tii 0M |iici|qPKQt 押帥他 I 叫 for 
lifight thuEifiiMi^mm wih,r|i?r^ 


hul L ludijine- ^E-nMri^lj 



Pm 


/\s you cav\ see, v/^cr\ you use 
如 visual ed’rtov style *»s added 
*to youv ^or\*tcr\*t *t^C same 
i 七 y/ould be ok\ "t^c I wc si*tc* i ov* 
people, it's easier -to Compose 
pays y/V^cr\ you doir\ *t have *to so\rt 

■t^v"ou^ all *b^c HTML, m *bV^c 

dode ed’rtov. 



Wh 占 皆！ 


LW«41rd fef Mmiiiifin MJtow lvld3d Ji itl pm 
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[ 圉 IBBIEIl; 1 


7 


aSe 



This dus 七 ev of options doy>*tvols 
|*mb (or <a> elements) a^\A 
w movc W ta^s mscirtcd *m*to fosis. 
TKc ABC dhrof - do 她 sclcdts 

*tKc pos*t la^^ua^e air>dl *thc 
mor>'iW v/'ill *to^lc l/Vo\rdP\rcss 
*m*fco -full stvttY\ mode- 


The e^a^ded rwc^u gives you a style 
drop — doym -Pov du^tomd-tiddlly 
^ style mule (like say, 七 bold) -to a 
p^vtidulav scd*tio^ dhd move ddvd^ded 
byo “ 七 butt© 灼 s like and -fo^i 

to\oY. V^)u\r K>cw pajes y/i|| *mhcv-ii youv- 
bl% s s*tylc ； b “ 七 somctiirwcs you v /扣 七 
somcihmj di-P-Pcirc^i. Jusi vc^crwbcv- ii 
<^ly applies -to the ie^i youVe dumpily 
v/oirkmj Y/i-th—ii doesir /七 updaic youv- 
CSS v-ulcs -fov- -the whole siic- 



丁 he kitdhch sihk buttoh -toggles 
between -the default ahd the 
expanded visual ediW r^u. 



Paragraph 


T U 


[在卜 


Fmally, *tKc last dlus*tc\r of bu*t*toy>s oy> 一 
*tKc e^d^ded mcir>u alloy/ you *to msev 七 
movies 3y>d o*tKcv mcdi3 3s v/cll 3s special 
dKav-ad*tcv-s like -fovci^ duvvcr>dy symbols 
ay)d s^ed'idl yuuiuahor). 1/Vc'll io some 

o-p -these options latev m *tKc book. 


J 三〖三 《 


These bu 七 "tons a\re used io modify dhavad-tevs a^d paagvaphs 
wiih’m you\r posi ov page. I-P youVe (a^\\\ar v/iih word 
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Li^ ^ [ 

These buttons Keif you paste *m -fv-om o*tKc\r 
souvdes. Make suve you use *tKc M*idvoso^*t 
1/Vov-d bu*bto 灼 >wKc^ pastm^ *m -fv-om d Wov-d 

dodumcir>*t *to cir>suv*c *tha*t all *thc spcd'ial 

dKav-ad*tcv-s display fv-ofcv-ly. 
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exercise 



❹一 


ftfi imi|^ 


狀 iinSu^frics 


C ㈣ 咕 


m 削和 Mti _ 

■ft p fc -ii n p 」 川 _ _ 




P * ■備 


_ ••刊 


k ■ iAUK 

" 二二 二二 ’: 二 ：二 "二 


'U «b«li 

撕" •'W- lUK^iSP Trj|UH 


fltIB 


14 祕 


Use the visual editor to add content to all the new pages you’ve 
created to bring over from the old Acme site (http://acmebit.com). 


Up!4>id-. l lfiserE 


VlSiUJil 


==ts m m m 


1A/(C v\ttd -to vr\t 
(or all tv^csc 

f>d^es 'm*to WovdPv"Css. 

Add *tV^c 乙 。灼七 ⑼七 a 灼 d bry 

■to i\\c -fov-mattmj 
as closely as possible 
i\\t visual edi-tov-* 


A«« Bll fcnr:u>- jqf 綱」加 B 口 响 


dse 棚 tipiTii 叫 aiMl EiikicoutmuniiaJiiKifti 
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Pay at-tch-tioh io the old site a^d make 
sure you arc getting all the dohtcht 
you W preview you^r pages m WordPrtss beW 
you <Wii publish，them the 赠 Id. 
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Contact (/contact) 


FwrnH - 3J 瞧 在 ** ■ i 2 U ^ 

Tlie Acme Bit CompsLny haj been a Ig^dlnj ； manuf^tiur of quatily hits muJ qLiLinlum bits 
for the computing industry since 11J84. IVe are an irvdustiy leader in qualify anti customer 
service with our bits ^oing on to power everything from your ftinev toaster ig ymir giant 
flitl -scra'n TV. 

In *iddit,on to ⑴ mpuling bits h Asimc also sjMnialiEes in quantum bits or "qubits." 'i'bese- 
hits Like our coinpudng {down )【q The neM sub，atomic 3 e%eS and are helping to power the 
hilure of discreet computing. 

Piiihj 


E^esdSe 
SotytlOH 


Use the visual editor to add content to all the new pages you’ve 
created to bring over from the old Acme site (http://acmebit.comY 


About (/about) 


LJptnflfl/ln >5i>rr (p. FH 畢 


U/In^cil d ； yj # VLiu^l HU 
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■■III 

Uil! 
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4^ 
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: Hi. 





We are* always eKcited【(）hear from our favorite customers. If you'd like to get a hold of 
u^ r ptesise send a letter nnd a self-addressed, sEainpcd emTlope to^ 

Whot's L'ji Acme 
PO BOXutKitii 
(71 , E ■ 」 fWinOL) 

VV r e will read vour Ifttcr when ive receive it Lind then carefullv file iE alphabettcallv in one 
of our many flic eobtnet^. Ln addition, well send yoy a visum I representation of a bit in 
bilkktr lunn ^ yuu uan rejjrtrstirU Alsup im yi>ur dtsk F ur I'rjptJtrr 
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ACfTW tifLidiu^ JnilihliLii 士 iimr of bilLm iiifutfraylhriktlJUbfi Euf tfat- 

mfiiiHilan.il ami [flrrurvirmjbEralJDlii jndunLriuH 


Abaui Ii4 

I II .lm hM ^jraquD^SkH bvi__ baitag i 
_ 扭 i«f 咕 

nnav vri-BW l#ii py^M4ji^»vr mi 
flri HtK 


_螞 \^mrf I •■由 r Ip i^fjsr prtfwraw 
T^riSvqi Pmn mat farKf Iu*-I#t [iHri 


Tb Job MEi-mtsmat hm 
br^i h|4di> -i. -^fV# itp Iv 

冬■尋 

ih^Phv dyp b m! 


Wlc’ll spl*i*t Pvodudxs 
■tKv-cc pa^cs, oy\c (o 
ma'rn pa^c dv>d *tKcr 


pay -rov c3d 

<^P Pvodud*t (s*tay>davd a 灼 d 


iiih.T4ri^ 


o 


Q fck**™ _WPuiua - 

AciThie Bilk 北 liurvmf hinjiiv tinilH ihtr. 

i^uipLitii 叫 4ik 1 kk\xmiiuunkiiUciiiii indu^trik^ 


PraduGb 

fbc te Ij^nr^upruHni ■ v4Jc Esqp'WilJCEliriiBDd^iturJi 


Wi>lhdAm^n<ktfhft. 
Hg ■ 

3 RHL Hll llklS^ 

RKCCf1»4* k»d 


r »- 1 hit, I 

Uubr 


Aertl# Bif n lNdln|} mnnufeiclEircr eiF hlcury mrfinnnlian ynils far cbr 
wtnpLfciinK urd 此 wiwumkMioM 


■aflfeuH d kfej ■ ； T»a r 議 bu 

NPvI^PtIwbI |»HB|wferr hv 
■rrllhr wh ■jm* n k ,ik 

， _j — 他 


IKr^cpV^H 

h-h _ 矚 | "_ i 


rwtaR^I 


P mml ll^ k 
1 f» 


■ tlw 


R#<MPe>«c« 

_ Tb- Ul!' IW. 

- iM EMp^nfepR 

r _r lhi，i 


-J ^i.i- 

r 4|p , Aiiii 

C#i4-3^Tl*l 

■ ^ f 


L ■ ■ 


+ (n #9-H 

» ， ㈣“". 





• Li •. ±L- w ^4;4- 0 八《 4*’’ o^ae *tV\C d3sKbo3V*d- 
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branching out 


All pages are wot created equal 

We’ve created all our new pages, but something’s still not quite right. We just have a bunch of 
pretty URLs, but they aren’t organized the way they were on the main Acme site. Creating a 
hierarchy is an important part of organizing your content. Some pages are what we call “top- 
level” content, which is like introducing a main subject. The AcmeBit page about Products is a 
top-level page, but some of the other pages are not. 


Wasn't there something we 
were supposed to do with that 、、 tree" 
diagram from earlier? These pages 
don’t have any hierarchy, maybe that 
has something to do with it? 


True. Not all these pages are equivalent. 

Creating a hierarchy entails making “nested” pages, or sub-pages 
out of secondary content. It helps people visiting your site 
know what to expect, and it will also make our URLs match the 
site organization. Like we saw earlier in our tree diagram, the 
top-level page is the parent page, and the sub-page is the child 
page. This creates a “nested” navigation, and our page URLs 
should then reflect the parent-child relationship. 


AH "the pajes wc sdded m -the las 七 

show up at tlic top level of -tlic si-tc- Some 
"those pajes should be sub-pages o( ■fcop- 
level Fov example should 

be / about/people- 





_J 
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Tree Diagram Magnets 

Place the content magnets in the appropriate spots on the tree 
diagram. You may need to go back and look at the main Acme Bit 
site for help. 




o-f 

d £.or\*tcir\*t oy\ 

md'rn site. 

七你 bclov/ y/*ill V^clf us 
make su\rc v/c build s*i*tc 
fv-ofcv-ly *m Wo\rdPv-css. 


30 七 oy\c 

siartcd -Pov- you. 

rwijlvt be 
ihc app\ropviaic 
sub-do 灼七⑶七 -Pov- 
^y\ abou 七 page? 


About Us 






Chcdk -the Bi*t si-tc 

(Ivt 七 p:/ / a 匕 rwebi 七.匕 orw) ’ 

^kc suv*c you didn't -fov^yt 
a^y pajes. 
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magnets solution 




Tree Diagram Magnets 

Place the content magnets in the appropriate spots on the 
information architecture diagram. You may need to go back and 
look at the main Acme Bit site for help. 


Aboui Us, P\rodudts, a^d 

will be ihc "top-level 

pays. 



About Us 


Home 


Products 


Contact 


广 


People 


pajes l.kc People 乩 ild I'.kc 

S-ta^da^rd Bits be 乙 Wild pajes ok 


ouv pv'imavy 


Standard Bits 


Custom Bits 


AM: all pages MdrcS 
sometimes ohC level is Chough. 


/products 



The pavc^-t page appeals i^mcdiaicly a-ftev 
ihe vooi \v\ -the si-tc URL. This a -top level 

呼 

/products/stawdard-bits /products/custom - bits 


Parent Page 




« 


Child Page 1 


I — _ 

i 

一 I 

T " g u 

^ - 


Child Page 2 


This dhild page will appear as a 
sub-page / pav-cht 
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A pa\TCht dah have Why dkild 
P a 9 cs - Those dhildlTCh tav\ CVCh 
have dhildv-Ch -Po\r mov-c Complex 
site layouts. 
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Sharpen your pencil 


Now that you’ve figured out which pages should go where, let’s 
get that set up in WordPress. Look at the options in the page edit 
screen and build the parent-child relationships for all the pages. 


Home 


About Us 


Products 


Contact 


nr#vi#w rharkg 門 


People 


Standard Bits 


沖 tus. FubliiiliDd 

Vl-clhlllvif Publir Itilf 

^ Publi&beil uri Ajit 21. 3DIO $ 1T.29 till 


Mnvf irb Tfi^h 


AuribuEes 


AH -the pajes ihai -Pall 
below ihc -fcop-lcvd of 七 he 
srte will y\ttA bo have d 
assigned bo -them 
so we tav\ display -them 
pv-opcv-ly ov\ -the si-tc- 


Custom Bits 


m 

^ ^ opt'Ohs i, -the page cd ，i 
s.dcbair U addih 3 如 d ^movma 
P^ChWhild ircWiohships 铋 pages 


Main ■ ne pjf: 

Ychj cjii Arringi vquw pagsi in h4^rardw ： i > I cr 
rvumpli 1 , yau rruild haw Jin AItiaiie 9 pagir 3 rh^ia 
hai I Ifr .mrl nrtg a fugfii unrlM 11 

TTkEIE JJ>« RD UmiiLl lQ h^W liCEplf riESitEd ^uu 
Cijri itijJic |mu«. 

liimpllJi 

LhFj.tin limpbli 字 

Seme itiemcs luvi cuscwn E-cmpiaits veki u/i 
utc Evi IcrEjin pjsieih Llul misphC luvi 
oddlLicm^l FcjLupifv in Lu^lirm ljvuLi1&. ir %m. 
_ th<fn above. 

□rdif 


ULUjJEjr uwUcrEd jtMhobclic-jllyi IjuL 
can imjC ii mimber above ： Cd ctianq€ Ebe 
oriSe-r pkiKi ap^jj In. 


F^tured Image 
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sharpen solution 


.^Sharpen your pencil 

fUlufinn 


Look at the options in the page edit screen and build the parent- 
child relationships for all the pages. 


o Find the Parent option in the Attributes sidebar. 

This drop-down will set the parent for the page you are editing. When you’re in 
the Page list view, the child pages will appear indented. 



All i\\c pages you Kavc added Vill sKoy/ up *m d\rop-doym. 
/\r>y cav\ be a o-f air>o*tKcv pay — jus 七 y> 。 七 ^ r rbel*f. 


Main Page (no parent} 
About Us 
People 
Contact 


Products. 






Y°^ 匕 如 dhcdk youv- 

pav-Cht—dhild settings ih 

the list view. 


Actik! 1 Ed 


Standard Bits 

i uu 1 、 ai ， •o.i I ari'yc ywi 11 I I 11 C 

^Mannple, you could have an "Abo 
has "Life Story'' and "My Dog pag 
There are no limits to how deeply 
can make pjg<es.. 

1 Empl-at-e ： 

Default Template t 

Some themes have custom tempi 
use for certain pages that might 
additional features or custom lay 
you'll see them above. 

Order 


EdUfiayi 


g, ai— 


❺ Select another WordPress page to act as the parent. 

Any other page in the system can act as the parent to your current page. After 
you select a new parent, make sure you save your page. You can make sure the 
relationship is correct by checking the indents in the page list view. 





content management with wordpress 


Thafs nice that they have parents, 
but how is that going to make 
those pages show up on the site? 

I don’t see them in the navigation 
anywhere... 


Puild navigation usmg the 
WordPrcss menu system 

WordPress has built-in functionality that allows you to build “menus” out of 
pages (and categories) and then use them in your themes. A menu is basically 
just a list of links —— in this case the links will be for our site’s pages that we just 
created.The great thing about this feature is that is recognizes our parent- 
child relationships and builds the appropriate nested navigation for us. Take a 
look at the screen shot below — notice how our child pages appear indented? 
This gives us extra options to control when and where the sub-page URLs get 
displayed. 

Main 


Praduciii 


Eundird liu 


Luiitcm mu 




I Dii 


CUPTEKE 


>y»UE US 


Edl! I CNl ^ 


EMU a 


LI I Dflfet 


U«l I D«^ 


Mcv>us tav\ be dv-ca*tcd 

-fvom *tKc A1cir>u of 
*tV>C 你扣以 scd*t*ioy> *m 

youv ddskboav-d- You 
dv-ca*tc as as you 
like ar\A use all ovcv- 
youv s*i*tc ov blo^- 



Locate the Menu admin section in your dashboard and build a navigation menu for the Acme site. 
Use the screenshot above as a guide. 
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exercise solution 



Locate the Menu admin section in your dashboard and build a navigation menu for the Acme site. 


tifesciSe 

§Otyi|OH 


o Select all available pages in the 
Add Pages sidebar. 

You can bring this selection list up by 
clicking the “Show All” link below the 
search field. This will add all the links to 
the Main Navigation. 

M^iln N^vlgailcm 

出 

i u^tam Hiti 


Add Pages 


Hide All 

^ Products 
0Cystom Bits 

I? Standard Bits 

^Contact 

^About Us 
(^People 


Search 


Add tc- Menu 


Him 


rnirrurT 


Edit I Dfelcit 


Abmui \h 




[dii I D«l«[t 


Idli I 


NOTE ： The -> 

rtem is only available 
•m 1/VbvdPvcss Z.O . 、 


❺ Drag child links on top of parents 
to create a sub navigation. 

When you hover over the links a four-way 
cross will appear and allow you to drag 
the links around the menu. By dropping a 
link on top of another, that link becomes 
a child, and indents in the menu. 

CiVildMmk rtems y/ill sKov/ as sub 

灼 dviytio 灼 rtems'm s'i*tc menu. 
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Modify your theme to enable the 
navigation mm 

Now that we have our menu built, we need to get it onto our site. This feature 
is not enabled by default in our Acme theme so we need to add a bit of code 
to our template files so we can see the new navigation we built. 


Otitt you vc sc*t all pav-cr>*t-tK*ild 
clcmCir>*U ^ mCir>U l*t should look 
somC-tK'm^ like -tK'is. Notldc Kov/ you Uy\ 
have multiple I'mks sc*t as dh"ildvcir>. This 
y/ovks yed 七 -fov* ouv* Pvodud*t scd*tioy> 七 
has multiple subscdtioy>s. 



Ba 料 

0>pe 


Add this to your sidebar.php 
template file. 

fydd just *tK*is I'mc *to your 
sidcbav fKp -file *m 
*tKcmC- This y/*ill fbdc 3 
y>dv'i^d'bior> list m youv* sidebav* oy\ 
-tKc f>a^es *tKa*t use *tKc w s*idcbav- w 
-template- 



■Cj'Hkniirjsl bre 

PALI |ila | 

Cii^lpITI |ifi 

EN ! Dllfiv 


i 齓 _il 丨 Bhirls 

uwi in. 


UH | PHifhB 


You ddv> leave cvcv-ytKm^ else m 
heve m *tKc -f ile \us*t as *i*t is- 


<div id="primary 〃 class= 〃 widget-area"> 


<?php 


nav menu(); ?> 


<ul class= 〃 xoxo〃> 

<?php if ( ! dynamic—sidebar ( 'primary-widget-area 7, )) : 

// begin primary widget area ?> 

<li id= 〃 search 〃 class =, fidget-container widget_ 
search’’> 

<?php get_search_form(); ?> 

</li> 

<li id= 〃 archives 〃 class= 〃 widget-container〃> 

<h3 class= 〃 widget-title〃><?php _e( 

'Archives' , 'twentyten 7, ) ; ?></h3> 

<ul> 

<?php wp_get_archives ( 'type=monthly /， ) ; ?> 

</ul> 

</li> 



sidebar.php 


you are here ► 


119 






test drive 



Tost DriVq 


o 


AtKNUi Aenuf 


Our FnNJ 


L'.% 


information units for the 




、 

Wc alv-eady Kavc *tof-lcvcl v>av*igatio^—* 
七 iVis y/ill sKoy/ people >whcv-c 七 hey ave a 七 

•m *tKc sub - fays. 


b about 
b atc os miinv 
tk^of 


Products 
Standard Bits 
rn^rom Rits 
Contact 
About Us 
Poo pic 


Thp Aonp Rst Company hns 


JJL 


But ouV mCir>u is sKov/'m^ dll f3^cs m 
ouv y>av'i^a-b'io^ dy>d y/*rtKou*t *tKa*t Kicvav-dKy 
we jus 七 pu 七 *m*to f lade! That dould ^c-t k*md 

o-p doyvfusmg m domud*t'ioy> y/rth 你 am 

r>dv'i^a-b'ioy> uf> *tof- rt >would be ^*idc 1-f 七 he 
m ⑶ u or>ly sKoy/cd l*mks vclcvay>*t *to *thc pa^c 
y/^Vc oy> do 灼七 sV>ov/ ^ v*c 

alv-eady oy> tKc / dov>*tad*t pay). 


Use CSS rules to control what shows up m the menu 

Getting our new menu into the page was only the first step. Since we didn’t have any code in 
our theme’s template to display the menu —— and we just added that — we also didn’t have any 
rules in our CSS file to make it work properly with the rest of the site. Let’s create some rules 
that show and hide the sub-pages based on what page is currently being viewed, so our menu 
properly reflects the hierarchy we just put into place. 
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Ope 


Update the CSS to make the menu play nice with the rest of the site 


menu li.current-menu-item 


AAA -tWis -to i\\t bottom 




display : block; 
font-weight : bold, 


menu li.current-menu-item .menu-item-object- 


display : block; 


font-weight : normal 


menu li .submenu li.current-menu-item 
display : block; 
font-weight : normal; 


TV^csc CSS rules Vill make sure 

ou\r displays Imks 
oy \ *tWt ’s 

C\Arrtv\iVf active. 



style.css 


Products 

Standard Bit.s 

■ Gusto m Bits 

Co ntact ^^ 

About Us 

■ People 


This is v/ha-t ou\r imeKtu 
should look like m 七 he 
sidebav* o( ouv- 


you are here 



let’s try that again 




Tesr DRive 




l4[ i 


JkfEE 遍 WtlHr W«ncF 1 , £>fd- IIW 


Unc i j fjjcm<6ir icflfcm 1 i 


■ ■- 



Acme Bit k£> a leading mamsfactureir of bhiary inforniatiaii units for the 
jjEul 1 \ il e*mninu mic-it inns tnilii.strii's 


Our SHs are Better 



64 


icU 

inliriE Bill 
flSim filli 


At AJEBWplH wp ikiKW WP bitlt, bootl pri_, Nl nr^J-l li'ij 

in Nt pMi££tiii , tn emir fiwn nd tlHl £bowi tn put pradna 
of iiUr l6g. 32 knd &|-bil mdddlc 



IrAEuinui lroi I 


• Pumiftldn^ 
_■ HflWliliirbl 


trbdlrn 
•i^iivlacni h 


_ Ln&Hnry^ilmE iaiiaflnfe 
jti wfi'AA-lbil iiy" 


Wait, the home page still 
shows the blog—shouldn’t 
there be something else 
there instead, like what was 
on the old Acme site? 


Tbr Artk bl Q>E?w#rhiH 
bi^ia (hfa|i.fof 

ll^firimptiiLni; jp 4 a»|r) : sutff- 

3 閲 4 .、\e mi fafliih 

njmviaiiy IhM miS'lv ind 
iiippsA,,uiir Icnl 
\_ 

U til 

:|| \ irtliHLIlflMt 


TV^c iiomc pay is s*till 

disfUyi 灼 3 a \rcvcv-sc 

£.Wo)r\olo^id 3 l l>S*b o-P blo^ 
posts. Wlc r\ccd *to move *tWis 
{p /blo^ ar\d fu*t i\\t ov-i^mal 
V^ome pajc batk a*t *t^c 

•mdc% lotat»o\r\. 


Nice catch. 

The Acme site had a pretty basic “Home” page, and 
when we moved the site over to WordPress, we didn’t 
actually create the /home page along with all the 
other static pages we made. So we’ll need to do that, 
and figure out where the blog will fit into our new site 
structure too... 


i Cj 

D 


■邮 




J 
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WordPrcss has different home page options 

Sometimes you don’t want your site’s home page to be your blog. If you’re just writing 
a blog this is fine, however, if the blog is just a small part of larger site (like our newly 
migrated Acme Bit site) — you may want to choose a different page to be the home page. 


丑 I 1 Reading Settings 


Front page displays 


General 
Writing 
Reading 
□iscussicrt 
Media 
Privacy 
Perrnalink^ 


0 YDur latest posts 

: 二 : A (iiplprf hplnw) 



Front page. 

—— 3eleU —— 

ji 

T 




poses page: 

— Select — 

蠹 

T 





10 


posts 


items 


The optiohs 

located m the Reading sedtioh— 
odd loutioh i*p you ask us … 


TKc blo^ doesn't V>3vc *to be 
-tKc home Wc tav\ assi^ 
dv>y o*thcv w s*ta*t*id w pa^c as 
*tKc dc-faul*t (or a usev 
v*is*i*ts 七 he Komc pay. 


We ddv> also make *tKc blo^ 
skov/ u\> ai av> al*tcv-y>a*tc URL 
loda*t*ioy> like /blo^. 


^harpen your pencil 


Use this menu and the static page options to make the blog 
appear at /blog and the original Acme home page (now powered 
by WordPress) appear as the default page for the site. (Hint: you 
probably have to create a few new static pages to make this work.) 
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sharpen solution 


^Sharpen your pencil 

Solution 


Use this menu and the static page options to make the blog appear at 
/blog and the original Acme home page (now powered by WordPress) 
appear as the default page for the site. (Hint: you probably have to 
create a few new static pages to make this work.) 


AhauE Ui 


二 I Index 


□ Acme Blog 



t>anlicE 


iundj^d RIci 


BcW wc the hor，c paac 

to a^ot^ wc h> add a paacs h> 
f c , , /blo 9 与 。 ahead ahd add two 


, . . ^ w anu doa XV/O Y\C 

lcvc 'P a 9 cs： Blog. (Xdc^ is a 

卜 used io rcU -to the default hor, c P aae 

；/p. a Wcbs， T y ° u scc whch y° u ih ^ 

URL-so wc II st.dk h> that tcv-^mology hc^c W) 


PPiuldnUii 




A-fW you V^ave added i\\t y\c^ pajes, 
jumf ovc\r -to i\\t Rcad'mj a^d 
J cM^y tV^c Rcadmj Scttmjs -to look 
like -tV^c stv-ccr\s^o*t belov/. 


^ Reading Settings 


front page displays 


OYoor latest posts 
0 A ^r^tir n^np (^pJ^rr hplnw) 


front page: flndtK 


Poses page: Acme tilog 


these sc-ttm^s, 
youv* home v/ill be 
*tKc y>ow w |r>dk'x* w pa^c >wc 
dveated ar\A *thc BI05 
will appear at /blo^. 
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No more blog... No more home page either? 

Like most sites on the Internet, the home page is usually somewhat unique. Maybe it has a 
rotating image at the top or a slightly different layout then the other pages. This helps anyone 
visiting your site identify whether they are on the main page or a sub-page of the site; it also 
helps set the brand and tone of your site. To accommodate this, we need to add a new template 
file to our theme to hold the special markup and layout for our new Acme home page. 




i 




l-rt 


o 





ACrtW Olt lb nunu^aurLT dI binary inlonn-ntion uniits far ihn 

巾肖 slid 


PneKfucts 


IfcrAnin ll 

bm billia 

I br h! '■H'r 


Because k\cv/ pajc v/c 
added -fov- home 

is blank, v/c *t see 

-tV^cv-c yet 



«»lin Hlk 


R 4 C 4 i>L P 04 l 9 > 

■ I i*|* P#i (jrfr 1 L n i 

4 hJ 1 p^P£ 

>« Arri MM 





〆 - ^ 

The ovijmal home page already had its 
own special s-tylc—all wc Y\tt& {p do is 
this BY\d -the assodia-ted Cov\itv\i 
iivto the K>cw home page -tcrwplaic -file 
we jus-t added. 
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home page HTML 


Add HTML to your new home page 
template file 

/ / \dd -this *to youv -file wKi^K you should have saved m 

I 七 he rooi youv template AWtebo^ W\i\\ *tKc rtsi o( youv themes. 

<?php 



Reaps 

0 >pe 


/* Template Name : Homepage 
?> 

<?php get header(); ?> 



This is impo\rta^i because \i -tells 

IA/bvdP\rcss -to use -this -Pile as d icmpla-tc ihai is 
available *fo\r us ■{» use -Pov ouv pages a^d posts. 


<div id= 〃 content 〃 class= 〃 wrap〃> 


<ul id= 〃 products〃> 

<li><p class=’’bit-l6’’>16</p></li> 

<li class=’’center’’><p class=’’bit-32’’>32</p></li> 
<li><p class=’’bit-64’’>64</p></li> 

</ul> 

<ul id= 〃 descriptions〃> 



homepage.php 


<li><p><strong>l6 Bits</strong> Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris.</p></li> 


<li class= 〃 center 〃 ><p><strong>32 Bits</strong> Lorem ipsum dolor sit 
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris.</p></li> 


<li><p><strong>64 Bits</strong> Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad mil 
laboris.</p></li> 

</ul> 

</div> 


<?php get footer(); ?> 


一 



This 匕 ode is vciry sirwilav- io ihc 
rwamkup ihai wc -Pou^d -the 
s’rte. 



Hoinepag^ t 

Seine themes have custom term plates you can 
use for cerlaEn pages that might have 
additional features or custom layouts. If sa, 
yau'll see them above. 


Make suve is selected as *tKc -template (or *tKc 

v>cv/ |y>dc% pay. 
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Thew add the Acme site style rules to 
your CSS file 


Add *tKcsc vulcs *to bo*t*fcom o( youv s*tylc dss -f ile* Tiicy 
dVC dll lur^cs -(*vom "tKc ov*i^iy>3l si*tc tss /^los*t o-v 
still v/ovk 3s *tKcy did ov\ *tKc old si*tc- 



Reaps Baw 

■V 

0>pe 


^products li { 

background : #eee; 
float : left; 
width : 250px; 
height : 250px; 
list-style-type : 


none 


^descriptions li { 
float : left 


width : 250px; 
font-size : lem; 
line-height : 1.6em; 
margin-top : 20px; 
list-style-type : none 


^products li p.bit-16 { 

background : #e8ba4a; 
font-weight : bold; 
font-size : 2.5em; 
padding : 2 Opx; 

border-bottom: 5px solid #d7ac44 
color : # f f f; 


^products li p.bit-32 { 

font-weight : bold; 
font-size : 5em; 
background : #e87826; 
padding : 2 Opx; 

border-bottom: 5px solid #d66e22 
color : # f f f; 


^products li p.bit-64 { 

font-weight : bold; 
font-size : lOem; 
background : #ff3bl6; 
padding : 2 Opx; 

border-bottom: 5px solid #ed3314 
color : #fff} 


^products li.center, ^descriptions 
li.center { 

margin : 0 2 0px 0 2 Opx; 


^descriptions li.center { 

margin : 20px 2Opx 0 2 0px; 
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a complete site 



Great job. Any chance 
you want a job on our 
new web team? Were 
hiring! 


Rih I 川 m itmiDr ikna ii_ Hi!^ s ■ i| 、 irii! if »-iI A 4 KitaiIjiifwi i| 11 _ V 

Mft.flDUC'Clxtur inf； th\ n，： Q _i -:1，"人 i^uiCiriflL 

duaniixi s rapsir ddiiri s-ni^mwil 1 \tu ^i| iJiriI duam-d * Iimdid 

t|J |x4wi ll v^liiua, U3 lalwr^ vrl iluliirr pinppii Ld CL 由 illiii'r 魂平』 

Lh Fiaih _i| nfiinii! rraiam ipibb E*l prim mil vdrarn rrrdjili, ipib- V\ naih _il ■miirii muin i_ib 

eid 減 fiMi cMEOtidun nLMmw o^inMl eufrotitian ijtlMmm rvs4ETMl curnLibun ullii □如 


/W Jay cby\ update a^y 

of *tKc p 〜 s o 灼 *tKc s*i*te 

jus*t 3 s easily as y/c da^ 
dveate ov cdi*t a mv/ bl< 
pos 七 *too … 
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Your WordPress Toolbox 


You’ve got Chapter 3 under 
your belt and now you’ve 
added managing non-blog 
content for a website. Next up, 
letting multiple users post to your blog ， 
and adding categories and tags. 



BULLET POINTS 


■ Although WordPress is billed as a blogging 
platform, it’s perfectly at home in the world of 
content management systems and can be used 
to manage all aspects of a website. 

■ WordPress allows you to add pages which are 
just like posts but outside the blog. 

■ Use Pretty Permalinks to change the end of your 
URLs from /?page=12 to something more user- 
friendly like /contact. 

■ The visual editor can be used to style text in post 
and pages and can even expand to give you 
more word processor-like functionality. 


■ Pages can have parents and children which 
allow you to display the pages on the site in a 
tree-like hierarchy. 

■ WordPress 3.0 introduces the concept of menus 
which will help you build navigation based on 
pages and posts on your site. 

■ If you manage a blog and static pages together, 
you can use the “different first page” feature in 
WordPress to make your blog appear at a URL 
other than the home page. 


Co 
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4 users, Ccitegorfes, and tags 



It’s time to invite some friends to the party. 

Blogging (or managing a Word Press site) doesn’t have to be a solitary venture. Loads 
of well-know blogs out there feature multiple user roles, from writers to editors and 
administrators. In this chapter, you’ll learn how to get multiple people posting on the 
same blog, manage the workflow across all those people, and put categories and tags 
to work in organizing your site’s content. 


this is a new chapter 
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time to start herding 


You're the wew editor of Thawks for Muttow 

Thanks for Mutton is an online magazine —— OK, a blog — that publishes about food 
and cooking from a uniquely geeky point of view. You’ve been brought in to bring some 
organization not only to the site (which runs on WordPress) but also to your group of staff 
writers and contributors. Let’s take a look and see what you’ve got to work with. 


This is -the home pajc o( Thanks -Pov M^iiov\—y\obu how 
七 he 2> pos-ts live wi 七 h’m a -few rw'mu'tcs o-P cadh 。七 hev-. 


ft 







Thanks for Mutlon 




w 


WKat'a a MuHan? 


m jn^§^r Il'e d^bn; and macf fcTOriJ iKjji 'A'k vouii^r e^ur^prpaji bantl 

ftprl nf'TrrTK'Bfr Irii^.h UnD? mnlicii pmaf^rrly Ui_Iihi 功 _ fDfHJir na^nrdtrrf td 
<um\ bili^ IlehJ L-unin. 


fekKih 


Hvarri FdhI 9 > 

i mkri'i«-I# r 3 




Tho DHw PLtsa ： Qmp DteJi in C^o||<a 

P'wc-ffdEFiJlcrt 

Whm prTqdr Ik^k ihrylhirA l ^in muS, hdtt nfi Ik" hfrilDtn, rbcrmn Ibr 
,u l ! m prp^nouaiisii Lwik Wr%\ ridl lip- fc Knft Vin"h p slgrlr pimalkr 

dlkcae EbuiilJi e\iry Cwnliic^ md 办 i @unr.rr. hi: Eki^Lfi 

Cerent th-pt &l tb»« A pm- Hue wMhj line pnxa ind cu&efxrie £iid 

difA. I.v- in Jk^r-nci IlHiii k. r>rK &arl iifl#n rH[iurpii j knilV』nd bidL 

I'm bpraLir^—of eiiuimjf—Hfvj 


nrr|i Hull bt>«|ixd« mi^jLr njpllii^ ^miWrsm h#il r__&ci tfjy ihick, llir-nviJ. Li 

iilri. And tmcitiy md ibi ifemi bMEk b»E4cn»m.fe<fcv iM iu 况 . tbm 

pt« EKtdlD kl£ br isIujihl uilpiur_ ibt ^hew amj tot pf^^ected by-a Iryrr Df 

uiifvi I Kj! mi hit# I hr iih^ 1 i niiTl K«l: huiwn^ 


_ C-Hi!V'*SDi EU^ 


You may have y\ohud -these datc^oncs oy> youv l/Vo\rdP\rcss blo 3 
already. We'll dovcv *tKcm *m dcp*tK *m this dKap*tc\r, but -Pov v>o>w 
y>o*t*idc 七 ha 七 *tKcvc docs^*t seem *to be ar>y datc^ovy oii^cv- 
l ur^a*tqov*iz^d.’ Pocs^*t seem *too Kclf-ful, docs *i*t? 
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^vcv*Y v/v*i*tcv* is usm^ s3mc lo^m *to add ^os*ts *to 

blo^ m Wo\rdP\rCSS. Or> *tof of *rt's i\\t admmistiraWs 

y/kidk medics y/vi*tcv*s dould have addess *to lo*ts of sensitive 

s-tu-f-f! This tav\i be y>odU. 


f Our readers just 
广 care about the writing. 
( We dorVt have time for 

l categorizing stuff... 

We all use the same \ - 

login because ifs easy— ^ 
you never forget the j 
password! J 


TKcv-c is v-cally v/ay *to -tell v/Ko v/v-o*tc J 
y/ha 七 . Some au*tKov-s added *tKc*iv- y>amcs *to 七 V>c 
bo*t*tom of *tKc pos*t—o*thcv-s did y>o*th*m5 a*t all 
ay>d mosi o-f -the fosis just say admm. 


TKc TFM siaW. 


Now that you’ve seen what you’re dealing with 
here, take a few minutes to think about how you can 
get both your writers and the site’s content better 
organized. 







the user pyramid 


WordPrcss user roles 

A “user” in WordPress is any person that has access to your site 
with a username and password. WordPress allows you to add 
multiple users and give each of those users a role within the 
system. For example, we could have a main administrator that 
controls all aspects of the site and an editor that can only review 
and publish content but has no access to core WordPress settings. 
In general, user roles adhere to a heirarchical structure: 


You v-cally oy>ly wed om o\r *bwo ^ 
adm'm aaourrls. P*itk OY\t pevsor^ who 
will be vcspor>s*iblc (or 
•ms av\A ouis o-f -the srtr ^ov/lcd^C 
of 1/Vov-dPv-Css is d flus. 


publish -theiv* own v/o\rk, bu*t da 灼’七 
edi 七 o-thev posts (like edi-tov 
This \rolc is pcv-Pcdt -Pov- 
-tv-usted s-ta-P-P wviicvs. 


£d*i*tov-s Kavc i\\t ability b> v/v-*i*tc, 

fublish dir>d edrt av>y*th*m 5 OY\ *tKc 

srtc. TKcy av-c *tKc admm usev *tKc 
fublisW》Side o( 1/Vb\rdp\rcss. oy>ly 
y>eed 3 -fc>w *tKcsc -folks. 



Coy>*tv*ibu*to\rs da^ oir>ly 
submit fos-ts -fov vcvicv/— 
-tKcy doY\i Kavc addess *to 
publish a” 七 *to *tKc s*i*tc. 





What are some reasons why there might be a 
much larger number of Contributors vs. Editors or 
Administrators? 
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The anatomy of a WordPrcss user 

You are in control of adding users to your system, but WordPress is also set up to support visitors 
creating their own accounts too (so they can leave comments, for example). In this chapter, we 
focus on user accounts that you set up for people to write for your blog. Let’s take a look at the 
options you have for users in your WordPress dashboard. 


炉 ■ ■■ ■■■: , 7 — 

I Q 4dm‘n 

Authors & I LiJ 


I 内 youv ddskbodira, cadK useir Kas a sci a*tVibu*tcs that make up Kis o\r Kcv 
w fV-o^*ilc W *m 1/VbvdPv-CSS. TK'is mtludcs email, 3ir>d imay display sc-t-tmy. 

I/Ve cav\ use -tKcsc a*t*tv-*ibu*tcs -thvou^Kou-t OUV S*i*tc *to add m-fovrwatiork *to OUV- si-tc s 
fos*ts a 灼 d 3ir>d *bo dorrbrol y/K'idh usev-s V>3vc addess *to spedi-rid -rcatuv-cs. 


Add New 
Your Prafile 


Nd^ni 


€ rT^All 





TKc mdm usev- pay displays a list of ihe 
duvvorrt uscv*s oy\ youv s'i*tc 3r>d voles. 

u tay\ add ； delete, air>d rwodi-fy usevs 
div*cd*tly -fv-om *tKis viev/- 




Users 


Authors & 



A Add New User 


ii fjn !iQ|i|£T V WJ 由 ia rru.-.jUr cf#Mf urt#^ h<ri 


Add Ncvu 


Uscrrvm irw^rrdl 
E _ mxil 8/mw#d! 


Your Prafil FtrtE N^itni 


Uit NjrrM 


Pj.iiiwnril - si . f - si 


Mrwipfi H^CUW 


fJ4J MUri 







Nlnt ju 

JiTifl AMft ¥• 
It JlTlMlfffi MW U.DW? mi cm 


I 



r 


Yo[a 匕如 3dd new 
uscirs -fco youv blog 
-fv-orw 七 he dashboard, 
licv-c you c^icv* -the 
basics and otiCt "they 
have a usev-^ame 
passv/o\rd, -they cav\ 

Cotr^t badk and *Pill 

•m details when 七 hey 

lo^ \Y\. 


Let’s See Kowilie dasliboard profile 
looks from a user’s perspective... 
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user POV 


A sample user profile 



mm 


「sers 



Authors & Users 

Add New 

Your Profile 

You cat) doyrbrol hov/ youv- 
shows uf fubl'idly oy\ 
srte (>wK'idV> CdiY\ be diT-fcV"Cir>*t 
*thav> v/rtKm youv 1/VovdPvcss 
pvo^ilc). 


Y^u have {o keep 扣 a^-tivc 

cr^ail address listed hcv-c so 
I/Vovdpircss CBy\ stay *m -toudh 
with you. The ^v-ava-ta 
■rca'tuv-c also uses -this 
addv-css -to -f md youv- pi 匕七 
(move dbourt "this la-tcv*). 


iv- 


u\rc 



a usc ^ P^ro*Pile scdiioir> is wheire you CBv\ add 
aboiA*t youv-scl-f di^d sc-t-tmjs -Pov- youv 


■d Piofik 

^nonai GptiDn& 


1 


UTiujE (Tdilar 


Arirr^n Co4ar Scticmc 


j Biidbk Lhc vliu J cidiLw rnhw^ viTllJfifi 


:: 


ClWT 


KeYb^iirLi 5hyrCLuE& 

Name 

Flr^l t4d.m9 

NLuma 

Utkiiuni 

BupIdY rurni pyMHLlif 


G fcrrtfwii lAflili.MlJi hr 


ymuilwr 卟印 




cjfttADl bt £f\in^d. 


jdmin 


ifldmn 

： 



please, please, flcasc use sctuv-c 
passy/ovds. Wo\rdPv"CSS is d 
sa-fc fla 乙 e v/b cvcv-ybody 
avoids -tKciv pets as a 
passy/o\rd* Tv"Y "to make ® oV" 
move t^av-attev-s usmj IctWs, 
r\umbev"S, ar\d symbols ar\d avo’d 
£.omn>oy\ y/ovds i*f possible* 


Cdfinsi Info 

E^rhUI inNTjsirRri 
Wtbsrit 


m 的具 I h|Ak f Ipn^fi ph w 1 " 


Vihuu m 

i Dooqk 1 Till 
我 1 »im V^&incir 

Buuiiaiilikjr mi# 




i^ir 


i. 






W f&v bOu 4I n* dfu^>#i hr l>Ar J» #rw 

_■ .UidM^ri J^Mk 

』— Mmt |sx I jway J iApwf Af Jt IkiM 1 i 

1 . ilM ft^prf Jlid -drfir m? 




W you doh'-t believe us, dhcdk this out ： 

http:/ / Ch.wikipcdia.ov-g/wiki/Passy/o^d 
Mdkih^Biru-tc^-Pov-dc attack. 


l/Vo\rdP\rcss has d hdp-Pul w Rassv/ov-d S-tirc^j-th 
|ndi 匕 a*to\r v/ill let you ki^oy/ how seduve 

youv passv/ovd is—shoo-t d ye ⑶ bav, whidh 

mdida-tes d s-tvo^J, seduire passwovd. 
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Match each user role to the permissions it has within WordPress. 


Admlnlstr^or 


I can write and edit my own posts but 
I can’t publish —— all my posts must be 
submitted for review. 



I can write and publish my own posts 
but I can’t modify or publish any 
other user’s posts. 



I can write and publish my own posts 
but I also have full access to other 
users’ posts. I can do almost anything 
in the dashboard related to publishing. 



Contributor 


I am usually an optional role and have 
no access to any dashboard features 
outside of the profile view. 


Subscriber 


I can do everything inside of 
WordPress including assigning roles 
to other users and changing site-wide 
settings. 
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who does what solution 







鬌亀 ▼ 你 M 


Match each user role to the permissions it has within WordPress.. 


Admlnlstr^or 



Editor 



Author 



Contributor 



Subscriber 



I can write and edit my own posts but 
I can’t publish —— all my posts must be 
submitted for review. 


I can write and publish my own posts 
but I can’t modify or publish any 
other users’ posts. 


I can write and publish my own posts 
but I also have full access to other 
user’s posts. I can do almost anything 
in the dashboard related to publishing. 


I am usually an optional role and have 
no access to any dashboard features 
outside of the profile view. 


I can do everything inside of 
WordPress including assigning roles 
to other users and changing site-wide 
settings. 
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Match users to their appropriate roles 


If you set up your blog to have 5 administrators and 20 people that all have 
access to publish content to the live site whenever they want, you’re going 
to have problems. It may seem a bit foreign at first, but for each user, spend 
a bit of time thinking about what they are doing on the site, and how much 
responsibility they should be given. Beyond that, here’s a good rule of 
thumb based on the user hierarchy pyramid: The higher the role in the 
system, the fewer users should be assigned to that role. 


Sharpen your pencil 



lVV>o yb *tKc r>*idc 
y/*mc ^lass a*t youv 
pav-*ty> by\A >who 
*tKc flas 七 id dup? 


Write down each staff member’s role next to their name and then 
create a user account for them with the appropriate role. 


You 


Ryan 


Allie 


Jeff 






You control the site 


Writes seasonally 


Staff writer 


Dedicated food reviewer 


Dwight 


Staff writer Junior veggie writer 




Jerry 



Freelance writer 


George 



Culinary Editor 
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sharpen solution 


parpen your pencil 

Solution 


Write down each staff member’s role next to their name and then 
create a user account for them with the appropriate role. 


>• AeW N 錄 w User 


Uinif fiiiivrihP' ri»fl 响『 


minujlti Inifip 






full iNjim 


lic\rc you -fill ou*t dll the \rc^ui\rcd -fields -Pov- d 
new usev-. Y^ha tan have -the usev-s -fill m -the 
v-cs-t laicv-. 



Make sure you av-c usmj s-tv-o^j 
passy/o\rdsf Sa-fc*ty 〆 


You avc alvcady *tV>c 
adm*m*is*t\ra*tov—>wc Ic3vc 

七 ha 七 alor>c- 、 

You 


Ryan 




You control the site 

Administrator 


Writes seasonally 

Contributor 


Bo*tK *tKcsc v/v-rtcv*s d3ir> publish ^Kcmsclvcs 
bedduse *tKcy wovk -fov *tKc s*i*tc. 


Allie 





Jeff 



Staff writer 

Author 


Dedicated food reviewer 

Author 


All *tKc doy>*tv-*ibuW >wv-*rtc pa\rt *t^c -Pov 
-tKc blo^ dv>d >^e do^*t >war>*t b> \ti ouv 
juvuov y/vrtev* publish ^ui*tc yc*t- \ v 


Michael 


Dwight 




Staff writer 

Author 


Junior veggie writer 

Contributor 


Ou\f duliha\ry edi-fcov- heeds -to be 
able ■{» read all the posts a^d 
^Kcdk -Pov 'bcdlihuidl cv"\rov*s. 


Jerry 




George 



Freelance writer 

Contributor 


Culinary editor 

Editor 
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Hmm. The roles seem to 
work but posts are still being 
published one after the next— 
sometimes within minutes 
of one another. Can we do 
something about that? 


Avoid chaos with aw editorial workflow 

Now that we have a group of users with specific roles for Thanks for 
Mutton, we can take a quick look at what the editorial workflow might 
look like. The term “workflow” simply refers to how pages and posts 
move betwen content producers and editors when some form of review 
and approval is required —— potentially multiple times —— before somthing 
is published. The site has two main content producers: authors, who are 
staff writers with publishing rights, and contributors, who are contract or 
seasonal writers that submit stories for publication. 


O 



WW — w a ;^ 7 


Coy>*tv*ibu*tov voles v/ovk v/cll 
-fov -fv*icir>ds ov o*tKcv- blo^cv-s 
*to ^ucs*t fos*t oy\ youv s*i*tc- AH 
-tKciv- posts Kavc *to 50 
-tKc cd\b>y bc-fovc *tKcy 50 li vg_ 
oy\ "tKc 



Au*tKov-s publish ovm fos*ts but 

ov publish ar>yor>c t\sts post 


Authors 




Coy>*tv*ibu*tov*s submi't ^os*ts *to ed.rtov 
-fov v*cv'ic>w dr>d po*tcr>*ti3l publ'ida*tioy>. 



Contributors 





Editor 


The cdi*tov- publishes 

do 灼 *bribu*toA posts, 

dy>d vcvicws *tKc 
au 七 Vdov’s posts a-P*tcv- 
(^oY\t live *too- 


The cdrfcov vcvicws doy>*tv*ibu*tx>v-s posts 
dr>d may vc«\ucs*t dha^^cs bc-fovc 
publ’isiVmg *tKciv pos*ts. 
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youVe got veto power 


Review pending posts from the admm dashboard 

Once a post is submitted for review, the editors and administrators need to be able to read it, 
make changes, and then post it to the site. 



Submit for Review. 

Contributors submit articles for review by editors. These posts will show “pending” 
until they’ve been approved. 




As an editor (or and administrator) you can publish pending posts. 

When an editor sees pending posts, they have the options to read and edit the 
content before it goes live on the site. 
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tJieretctre no o 

Dumb Questi 9 ns 


What is the maximum number of 
users I can have on my site? 

There is no hard limit on how many 
users can have accounts on your blog. 
Odds are you’ll never even come close 
to reaching a number of users that would 
cause any problems with WordPress. 


Can you create your own user 
roles with special permissions in 
WordPress? 

At this time, no. WordPress ships 
with the six main roles and doesn’t give 
you much else to work with. There are 
some workarounds if you’re comfortable 
writing PHP and plug-ins—but most people 
find the current roles to be adequate. For 


more information on the WordPress role 
system, check out http://codex.wordpress. 
org/Roles_and_Capabilities. 

Can you have more than one 
administrator per WordPress install? 

Yes, WordPress allows you to add 
other administrators to the system. We 
recommend you keep these roles to one or 
two trusted people in your organization. 


Things arc starting to look wore organized... 


au*tViov" r\ov/ V^as a fv-opcv* 

(dy\d to\rV"C^*tly \r\3mcd) Wl 


,• 


Whafs a Mutton? 


Hosted on tsy 伽 o 





Because O^ly a fcoflc co^bro\ 

yts fublisV^cd bo Wc 阿，歧 posts 
are ou*t oy\ a v-ejulav sAcdule, 
a^d s*i*tc already looks more 
^Y\d fv-o^css'ior\al. 
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corralling content with categories 


Categories are big buckets for your cowtcwt 

Categories aren’t always required for blogs, but most of the time it 
helps to have some organizational structure to your posts. Think of 
categories as broad “buckets” that describe or hold your content in 
WordPress. Once a post is assigned to a category, it can be displayed in 
WordPress alongside other posts within the same category. They also 
give visitors a snapshot of what type of content they can expect on your 
site and help them find other posts they might be interested in. 


do\r\*ba'm as 
posts as you like. 



Restaurant Reviews 




Pcm’t use jarym ov* 

y/ords ta*tc^ov~ics. 

\Cy\o^ youv audience 3y\d 乙 k 

a\>pv-ofv-'»a*tc *tcv-ms. 


1 七 \ a jood idea -fco make youv 
^aicjovics bv-oad so you do〆 七 
tv\d up wrth huhdircds o-f "the 你 . 
This y/ill mdke you\r job 9s 
cd'rtov easier av)d youv users will 
dc-f miidy appvcdia-tc i-t- 




Molecular 
Gastronomy 

v/cVc talkmj -to food ^c\rds \\trt, 
•tWis ta-tejo^ry is anally 

]^/\{\\ youv- 6cm 七⑼七 ov-ja^'iz^d by 
ta-tejov-y, usev-s y/*ill be able b> fmd 
^os*U cas'icv" ar\d y\aviO|a*tc s*i*bc 
bdsed ov\ m*tcv"cs*ts* 
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Categories help organize your content 

When creating categories, think about the big concepts behind particular posts —— and 
even behind the site as a whole. Categories should be very well thought out —— almost 
sacred — so don’t just add them on a whim. If you find yourself adding lots of different 
categories, you’re probably not being broad enough. Categories represent the main 
areas of content of your site, so treat them accordingly. 
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consider your content 

Cowtcwt is key when creating category structures 

As the editor of Thanks for Mutton, you’ll want to take some time and think about 
what you want the site to be about, and what’s the best way to organize it before you 
start adding categories. This way, you can set up a category structure that fits your 
content well so you’re not always scrambling to figure out what bucket a post belongs 
in, and you (or your authors) are not always creating new categories every time a new 
post goes up on the site. 


Look a*t tem 七⑼七 you V^avc 

and about toyrlwt Y ou 

Create, arc i\^t bij 
V^oia youv posts? 



li l s OK \( you only have 3 or 午 
taicgovics—-tha^s a^iually a good 
"tVmg/ sdd mov-c defiled 

laicv wi-th tags. 


Name 


Th<t is how it on y&ur Jiftf. 


Slug 



you add datc^ov'ics -f\rom *tKc fos 七 
mer>u you fv-ov*idc move detail and 

Use *tKc slu^ -fca*tuvc *to dvca*tc 

URL--Pv*icy>dlY versions o( domfl*ida*tcd 

datc^ovy y>dmes (so\rt o( like fvetty 

*tKc las 七 


l*p you provide a dcsd\ripiio^ (or a 
daiejov-y, you use ihai youv- 

■therwe -to provide additional 
"to visi-fcov-s. 


fhe ~sfug' is UHi -triendfv venicn of the nsfne. it ^ 

tisuafly Aii /div 亡 nrjjjt? and coftt^sins o 吻 fnimb^rs t And 

hy 0 h^ns. 


Parent 

Mone t 

由尨, untike ^ hi&fArch^M SKsu 

3 Jmz c^te^ory, And tmefer Waf iffjvs chil^re^ CAt&gories for 

S^top Bund, Tbt^ffy 


Description 
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Molecular 


Category Magnets 

Use the magnets below to build a category structure for Thanks for 
Mutton. You don’t have to use all the magnets, and remember to 
think about big, broad bucket for your content. 




/\ad i\yt you W\W >wo\rk best (or i\\t 

Use bo*tV> y/mdo\ws i-f you V"uir> ou*t o-f spade* 


Categories 


Categories 

All Ldt 叫 ones LMOSt used 


All Latepones Most used 

»VI un categorized 



iVI uncategorized 


Restaurant Reviews | 
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magnets solution 



Category Magnets 


Use the magnets below to build a category structure for Thanks for 
Mutton. You don’t have to use all the magnets, and remember to 
think about big, broad bucket for your content. 



Pasta Sauce_| 


Molecular Gastronomy 



Gadgets 






o-P *tV>c da-tc^ovics bclov/ vcfv-csch*ts a Y\\U b'15 budkc*t -fov us 
•to pu*t toY\itY\i The tatc^ovics below dould have iiu^d\rcds 
of ⑶七 av-tidlcs m -tKcrn, bu*t a usev- would ky>o>w Y/ha 七 *to 
i-f -tiicy sec a fos 七 Wrtii -these da-tc^ovics. 


Categories 

All Lategories Most used 
^ uncategonzed 


Categories 


All Categories fvtosE used 


j/ uncategonzed 



Biochemistry 
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Leftover categories often make good tags 

Don’t worry if you have categories left over — that’s a good thing! This usually 
means that the remaining categories are too narrow and might be better used as 
what are called “tags” within a post. Tags are specific terms that give more detail 
about the content of the post —— a post about sous vide cooking might be in the 
“Techniques” category and have tags like “sous vide’’ and “meat.” A good rule of 
thumb is that a post should have a single category and one or more tags. Use tags 
to add detail once you’ve placed your post in a larger category bucket. 


Category 




, r uuuk rhcd 

vcv-y slowly ai a low 

f d h 吵饮 li J s a ^ 

七尸 h—e that ， arc 

sta\rtmg -to use moire o^tch. 





Posts skoulct kave a single category 
and one or more tags. 



Go back into WordPress and add the category structure you built in the Magnets exercise. Then, 
add specific tags to the posts that have already been published—this will act as a starting point 
for new posts and authors. Remember: look closely at the articles when choosing categories 
and tags and make them specific to your content. 
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exercise solution 



Go back into WordPress and add the category structure you built in the Magnets exercise. Then, 
add specific tags to the posts that have already been published—this will act as a starting point 
for new posts and authors. Remember: look closely at the articles when choosing categories 
and tags and make them specific to your content. 


Vou add a^a mod^Y all your 

i\^t pay m i\\t post me’ 1+ 

you have 1 。吒 ta-tcjov-y you add a 
s^oritr v/o^d fWasc 如 11 Aov/ 吖 

•m URL U 払 at 


PApuI^t 1 

Jtevlcwi 

Add Mevy Category 


1 二 ： Biochemistry 


□ Interiialionaf 


Kcstauriant Kcvicws 

Dc S cri plioi iMw it nil 

SEugi 

reviews 

T?^ m ihi^ n h it h 

us u^ity .afi’ Jowsrcase ^nd coniaim onfy ietiers r numhsrs , 
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fn 
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Add categories from the post menu. 

You can add categories from within a post or from the category page in the posts 
menu. Either way, they end up in the same place. 
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❺ Assign categories and tags. 

Both categories and tags can be added to a post 
from the new or edit post screens. The sidebar 
will show all the categories used on your site in 
addition to a list of the most used tags. 


you Ye cditmj a pos-t, you sdcdt 
"the da-tejov-y you i*t b> show m. 
Rcrwcrwbcir {p imy av\d pidk ov)C da-tejovy 
bes-t v-cpv-csc^-ts youv post 


Categories 

All Categories Most Used 

f?f Reitauraot Reviews 
~ Biochemistrv 
]Gadgets 
二 Bnlernational 
二 Tprlinifillip 
□ Un categorized 


Like datc^ovics, pos 七 *ta^s dav> also be added to 

youv* av**ti^lc -fv*om *tKc cdi*t pay. Hcvc, iyy 
be a little move spcdi-f id vc^av-dm^ 七 he dov>*tcy>*t 
of youv pos 七 . 


以 you publish youv- post, "the 
^ 3 *tcgo\ry a^d *toias will show up 
… the bylihC o\r Tootcv- o-f youv** 
post l/isi-tovs tkh didk oh 
七 he "tags a^d datcgov-ics -fco see the 
a\rdhivc ahd ihdcx-shoy/ihg all posts 
^Oh-bih'mg those tags ov datcgov-ics. 



+ Add New Cateoun 



Posted in Reviews | Tagged diicago - deep dish, pizza 11 Comment | Edit 
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categories vs tags 


Fireside Chats 


Tonight’s talk： Categories and Tags sound off about who 
offers the most information to site visitors. 


Categories: Tags: 

I’d just like to start by saying that I’m the original 
taxonomy. I was around before tags were even a 
twinkle in WordPress’s eye. In fact, the original 
tagging structure in WordPress was built on top of 
the category system. 

Just because you’ve been around longer doesn’t 
mean you’re better. You are too broad, you give 
people no in-depth information about an article. 
Big “buckets.” What’s that all about? 

Oh, come on —— broad topics are the only way to go. 

A site visitor can take one quick look at a category 
list and know exactly what kind of content is on a 
site or page. Tags only give me information when I 
click on a post and scroll all the way to the bottom. 

Plus, everyone understands categories ~~you always 
have to explain yourself to people. 

Obviously you’ve never heard of a tag cloud. You 
can put it right on the home page and it gives you 
WAY more information then a list of categories. It 
shows what are the most popular topics on the site. 
Popular stuff, that’s what people want. Plus, it’s not 
enough to say this post is about design — you need 
to tell them what kind of design. 

Oh, here we go with the tag cloud argument. You 
know, if I wanted to I could display myself as a 
tag cloud. Plus, what year is it 一 2007? Tag clouds, 
pssh." 


152 


Chapter 4 



users, categories, and tags 


Categories: Tags: 

Well, why don’t you then? I’m sure your users would 
appreciate it. And don’t think my only trick is the 
tag cloud. I’ve seen users do pretty cool things with 
bar graphs and all sorts of other cool visuals based 
on tags. 

Well, if I’m used properly there shouldn’t be 
that many of me. It’s kind of hard to make a tag 
cloud out of 5 categories. Let’s just agree that we 
do different things. You handle the details and I 
take care of the big picture. You can’t have a blog 
without categories! Can you?... 

Whoa. You sound a little nervous —— like you think 
you may be obsolete. Personally, I think you are 
useful when used correctly, but most people abuse 
your power. Have you ever been to a site with 
hundreds of categories? It’s overkill and it just 
makes you look like you can’t focus. 

Agreed... A compromise then. I’ll take care of the 
“big picture’’ and you can deal with all the little 
details. I don’t want to do that stuff anyway. Oh, 
you can also keep the tag cloud —— I’m old-school like 
that. 

All right, that sounds like a plan to me. 
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talk about high maintenance 

Writers want their pictures next to their posts 

Now that we have some organization to Thanks for Mutton, the writers are starting 
to ask for more features. They’d like to know if you can add their images to posts, and 
to comments that they make on posts. They’ve noticed this on other sites and think it 
would be a good idea to put faces to names on the blog. 


Man, we just got our 
names by our posts not 
too long ago. 


Look at that! All the 
writers have an image 
with their post... 


That shouldn*t be too 
hard—especially for our 
rock star editor. 


O 


Q 




丁 kse wvi-tevs be a hdhd-ful 

sornctirhcs 一 bu£ ^ 

good idea a^d this shouldh^t be 
"too ha\rd "to get set up. 



Wc have some spade ov\ vi^vt 一 ha 内 d 

Side o-f *tKc pos*t scd*t*ior> 七 ha 七 y/ould be 
yea 七 *fov a 灼 au*thov p*id*tuvc- 




What's a Mutton? 

ry dwalii 




Mutton is older sheep. It's ridier nnd more flavorful than it's younser counterpart Inmb 
but is extremely tough if not cooked properly. Mutton is a popular ingredient in Middle 
Eastern and British food and often shows up m slow-cooked currtes. 
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Wouldn't it be dreamy if there were 
a simple way to add author and commenter 
pictures next to their posts. But I know it's 
just a fantasy... 




picture this 


frravatar makes user pictures easy 


Gravatar is a service 


Lutomattic —— the same 


folks that maintain WordPress. It stores “avatar, 
or profile, images tied to an email address on its 
servers so websites around the Internet can use 
those images to display the avatar of users logged 
in to their sites. The idea is that you can upload an 
image once and use it across any site that supports 
Gravatar. 


^v3va*tciv* Kos*ts millions of 3va*t3v*s -fov USCV"S 
adv~oss *tKc Its 3 widely suffov-ted 

scv^v'idc used by sodidl W'cdid srtes. 



Q Username 



v/ou may have 
iwis sidcv/ays m i\\c 
dashboavd. Tii'is is *bV^c 
dc-fault ^v-ava*bav-— i-f 
you W opcr\ imay m 3 ”广 

y/mdoy/ W you’ll sw >*ts 

^o*t Posted ov\ ouv- SCV-VCV-. 


Depend’mj 咖 youv iVovdPircss scitmjs a^d whrth 伙 
饮 you have addou^-t with ^v-ava-tav-, you 
see o^c c4 - -the -followmj imo^es. The %«ys 七 ev~y 
ir^ajc Oh the Ic-Pt is -the dc-Cauli -fov 1/VovdPv-css. 
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■Je-fl £Ibi1(3 
毋 Mark 

fh#H ro^Eura w 扣 snmfiltimq lt^[ 1 or^fmairy 舟『邮 IhjM rgaiy [ 你 1 tn 




^vavatav- images dar> sKov/ uf 
all ovcv d v/cbs*i*tc, mdludm^ 

•m -tKc dommCy>ts area* 0 t\ OUV- 

si*tc> dommCir>*tcv*s must Cv>*tcv* 3r> 
email address ar>d *tKa*t is used 
-to full m *tKciv ^vavatav imay- 


Sarah 

Thank you so mudi Inr Ihls lull 



mHflus araujo 


jam aliini iniflfPdiriri 沿 mih.^1 M：^rk mnihuh^rl ha^ifjilhi hami ■iihlA fn iTtfllinfii 

th 

bl __ 

m m 

Wow! Grtf 日 E plugin* example, 
is [her«a ^vay 10 im*r cuimm E^gs? 


IVff Ir/od 

Bdd lllLer^BL pusE mala', '■uimeo codeTi ： 
hul A'llhs no 



Head on over to gravatar.com and sign up for an account (if you don’t already have one). Once 
you're all set up, make sure that the email you used for Gravatar matches the email in your 
WordPress profile. 




5-igrup 1o gasB your own grn.vaEnr 
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exercise solution 



t^eRciSe 


Head on over to gravatar.com and sign up for an account (if you don’t already have one). Once 
you’re all set up, make sure that the email you used for Gravatar matches the email in your 
WordPress profile. 


⑩ Sign up with your email address. 

You have to use an active email address with 
Gravatar. They will send you a verification to 
make sure you are who you say you are... 


❺ 


Upload your image to Gravatar. 

Once the account is created you can upload 
an image, resize it, and link it to your email 
address within Gravatar. 


■ I,,：,, I I 


pcm’t use a 卟 crny era'll addws. 
今 vava^tav" K\ccds *tV^c ov\t you use 

youv *favo\r'i*tc sites. 


Choose a -Pile -Pvom youv- hard dHve 
■to schd -to ^iravatav-. TVy will lei ^ 
you adjust i-fc \y\ -the b\rowse\r so do^t 
spChd -too mudh time editihg things. 


❹ 


Use your Gravatar email in your WordPress profile. 

In order for your avatar image to show up properly in WordPress you need 
to use the same email address in your profile that you used to set up your 
Gravatar account. 


Contact Info 


E-mail (required} 


Wph^irp 


dre am v#hc odfi mlabs .com 
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&ravatar works with your email address 

Gravatar works by linking your email address to an avatar image that’s stored on the Gravatar 
servers. When an application or website that uses the Gravatar service wants to display your 
picture, it sends an encrypted version of your email to Gravatar along with information like file 
size and type. Gravatar then sends back a picture of your pretty face, auto-magically! 




WovdPvcss stv\As a vc^ucs-t *to 
^vavatav -to yt images o( all 

fos*t dr>d 3u*tKoVS. 





sehd us badk -the 
that cadh usev- has 

v/rth his ov* hcv 
Crwail ddd\ress. 




6 ee| Wits 


Here is what a request to Gravatar might look like: 


/ 


TV^is is i\\t of 

youv email address. Safety f '^i! 


http://1 .gravatar.com/avatar/b9802276d84112acceaf83c6ab10940f?s=32 


Talking -to ^v-ava*ta 



Wed like ouv* ima^c bo be 
VL'AX pixels. *^ 
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insta avatars 


&ravatar supports WordPrcss comments out - of the - box 

Gravatar is baked right into WordPress (it helps that they’re run by the same company) and 
only takes a few settings to get it up and running on your blog. 



Check the Gravatar setting in the Discussion menu. 

All your options for modifying Gravatar are located at the bottom of the 
Discussion menu. You can choose to display avatars, what “rating” you’ll allow, 
and how the default icon looks if a user doesn’t have Gravatar. 



You dcm*brol 
\)oyi appv-opv-*iatc 
u scv-s ; avatav-s a\rc 

sett … 5 a I 


■1 


❺ Save and Check 

Once you save your avatar settings, 
go back to the dashboard and see if 
the new images are showing up. 
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Extending 昏 ravatar's functionality 

So it turns out that Gravatar was intended only to support showing images 
next to comments. To get it working with our author’s posts, let’s investigate 
what makes Gravatar work in our comment template and see if we can’t 
use the same code to get avatars showing up in our main post bylines. Often 
a little detective work like this will help you figure out how to extend certain 
built-in functionality to other areas of your blog. 

fuwctioMS.php 


Looks like these avatars 
are only showing up in 
comments. OidrVt the 
writers want them by 
their posts? 


<?php if 


$comment->comment type 


?> 


<li <?php comment—class(); ?> id="li-comment-<?php 
comment_ID(); ?>"> 

<div id="comment-<?php comment_ID(); ?>"> 
<div class= M comment-author vcard M > 



<?php echo get_avatar( $comment, 40 ); ?> 

<?php printf( __( '<cite class= M fn M >%s</ 
cite> <span class = n says'，>says : </span> ' , ' twentyten '), 

get_comment_author_link() ); ?> 

</div> 

<?php if ( $comment->comment_approved == * 0') : 

?> 

<em><?php _e( 'Your comment is awaiting 

moderation•*, 'twentyten' ); ?></em> 

<br / > 

<?php endif; ?> 



functions.php 





T\{\s l*mc CoAt i\\t 

Ale displays 

ouv- ^v-ava*tav- image m 
乙 cm fost l/Vc 
{p mdke v/ov-k *m ar\o*t^cv- 

so v/c 

disf iay au-tV^ov- p^o-tos. 



<?php echo get_avatar( $comment，40 ); ?> 


This is a PHP function that gets our Gravatar image 
for Word Press. We can give it a size and it will display 
an image next to the comment. Do you know which file 
we should add this to in order to get images next to the 
authors’ names on their post? 
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single.ph 



I/Ve Y\ttd bo dopy *tKc yt—avata〆 ） 七 10 灼 *m*to *tKc sm^lc. 
f>kf> file bcdausc its -the or>c *tKa*t doy>*t\rols y/ha*t sKov/s uf 

•m mdividual blo^ posts. TKa*t v/ay ouv ^\rava*tav i^a^cs will 
display v>c%*t *to *tKc au-tKovs^ y>amcs oy> *tKc posts and ”。七 just 
*tKciV dommCir>*ts- 


<div class="entry-meta〃> 

<span class= 〃 meta-prep meta-prep-author〃><?php _e( 'Posted by 

'twentyten^ ); ?></span> 

<span class=〃author vcard〃><a class=〃url fn n 〃 href=〃<?php 
echo get_author_posts_url ( get_the_author_meta ( 'Iiy ) ) ; ?>’’ 

title=〃<?php printf ( esc—attr_( 'View all posts by %s r , 'twentyten^ 

) , get_the—author () ) ; ?>’’><?php the—author () ; ?></a></span> 

<span class=’’meta-sep’’><?php e ( ' on ', 'twentyten^ ) ; ?> </ 


span> 


<a href=〃<?php the_permalink(); ?>〃 title=〃<?php the_time(); 
?>〃 rel= 〃 bookmark〃><span class= 〃 entry-date〃><?php echo get_the_ 
date(); ?></span></a> 

<?php edit—post—link ( ( 'Edit^ , 'twentyten /， ), 、'<span 

class=\’’meta-sep\’’> I </span>\n\t\t\t\t\t\t<span class=\’’edit-link\’’>’’ 
k '</span>\n\t\t\t\t\t” ) ; ?> 


</div><! 


.entry-meta --> 


<div class= 〃 gravatar〃> 

<?php echo get_avatar( get_the_author_meta('user_email A ), 40 ); ?> 
</div> 

<div class= 〃 entry-content〃> 

<?php the_content(); ?> 

<?php wp—link—pages ( array ( 'bfefore /， => '<div class =,, page- 
link’’>' . ( 'Pages : ' , 'twentyten^ ) | 'after' => 、 </div>' ) ) ; ?> 



</div><! 


LcVs *mscv-*t 
todt a-P*tcv- 
*tV>c tlosm^ <div> 
-fov* w cir>*tv"y - 


.entry-content --> 


似 d "to cMa^c -the a bi-t a^d jive i-t -the au 七 e^ail 

address msicad o-f -the 仏你你 eivt c^ail address C^WicM \noy\{, work 

\ it I k ft a 




— — — —胃 _^ - ■冒 ，雩 ，^丨 ■ ^ fV 

yyv/ay). y/e’ll use whidh is a WbvdPvcss 

junction -Pov- jv-abb'mj m-fo aboui d pos-t auihov-. 


single.php 


<?php echo get_avatar( get_the_author_meta(“user_email)，40 ); ?> 
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Coolf ^vava*tav- \s y/ovk'm^. Bu*t, v\ttd 
{p apply some CSS *to *tiVis so rt sKoy/s uf 
a 七七 he vi^vt - hand side o( *tKc pos 七 … 


What's a Mutton? 

挪 Awil 27.2010 by dw^il 

Mutton older sheep. Ifs ridier nnd more flavorful than it'i younRer counterpart Lamb 
but is extremely toufth if not cooked properly. Myttonis a papubr inpredient in Middle 
Eastern and British food and often shows up in slow-cooked curries. 

m UncgneQOfagwl | Leavga raftYnem | E 仙 




k 彎 Baw 

■V 

Cppe 


， ou’re already starting to figure out, anytime we make a 
change to our template markup (HTML) we need to make 
an associated style (CSS) change. Let’s add some style rules 
to make the authors’ pictures fit a bit better. 


Add *tK'is *to *tKc bo*t*tom of youv* CSS -f ile- Feel 
-fvee *fco Vrtii o*tKcv* s*tylc vulcs "to 

yt *thc avd*tav* lookup Kov/ you v/a 灼七 . 


* =Gravatar 


V 


gravatar { 

float : right; 


gravatar img { 

border : 2px solid #e3e3e3 



style.css 
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an editor’s dream team 
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Your WordPrcss Toolbox 


You’ve got Chapter 4 under 
your belt and now you’ve 
added user accounts，categories 
and tags, and avatar images to your 
tool box. Next up, adding video to your 
blog. 




BULLET POINTS 


■ Always create individual accounts for your users. 
Having everyone log in with the same admin 
account can cause problems and increases the 
chance of content going AWOL. 


■ Assign roles to users based on how much access 
you want to give them in WordPress. 

■ A good rule of thumb for permissions is to allow 
fewer and fewer people access as you get higher 
into the permission structure. 


■ Categories help you organize content on your site 
and act as big “buckets” that group similar posts 
and pages together. 


■ An post should have one category and one or 
more tags. 

■ Tags are similar to categories but they often focus 
on more specific content within a post. 

■ Gravatar is a simple service that allows you to 
upload a single avatar image to one place and 
then use it across all your social sites. 
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5 Video and plug-!ns 


Getting things moving 


Just wait until you 


this 


see 


absolutely droll 


cat video 


I 


found online last night 


Video can add a whole other dimension to your blog. For nearly 

any kind of content, video makes your site more engaging, and gives you readers plenty 
more to comment on and share with their friends. In this chapter, you’ll learn how to host 
your videos online and include them (along with other downloadable files) in your blog 
posts. We’ll introduce plug-ins, which do a lot of heavy lifting (and coding) for you, and 
use categories to create a consistent, easy-to-find home for all the videos on your site. 


this is a new chapter 





video killed the internet star 


Adding video to Thanks for Mutton 

Now that we’ve got the Thanks for Mutton blog under control and publishing on a schedule, 
the staff has really started to get creative and wants to add other media to their articles like 
videos and recipe downloads. Two of the writers have come to you with a cooking video 
they’ve made along with some other content that they want to put in a post. But they 
have no idea how to get it on the site. Do we upload it to the site? What about YouTube or 
other video sharing sites? On top of that, how do we add more than one piece of media or 
content to a single post? Let’s get to work! 






] JL 1 J. ii I 






All ihc rwajov playev-s avc 
publishmj dookmg videos, wc t\ttA 
"to yt some c^f ou\rs up so we 
do 灼’七 stav-t losmj \rcadc\rs {x> 七 he 
bi3 3〒. 


Video 


二一 - * — < 


\Nt alv-eady Kavc a bur>dK o( 
uy>f>ubl'isked videos av-c jus 七 
oy\ domfu*tcv*s'm 
TF*M of-f ides. Wc y>ccd *to help 
七 he y/v*rtcvs yt *tKcsc up oh 七 V>c 
s*i*tc. They also have some w sKov/ 
noW’ -fov- *tKc Videos, Widh 

avc -f iles 七七 mdludc *thc 

v-cd*i\>c dy>d o*thc\r vclcvay>*t ^ccky 
devils -fov video. 
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video and plug-ins 


Host your videos outside WordPrcss 

Video hosting sites like Vimeo or YouTube are a great place to host videos for your own site. You 
can create a free account and start uploading instantly, and then “embed” those videos so they 
show up in a video player on your blog (more on embedding in a minute). We’re going to use 
Vimeo in all our examples here, but if you’re familiar with or prefer YouTube, everything is quite 
similar across the two sites. 



3Uc\>is a wide variety o-P video 
士 oirr^ts, -rv-orw 夕 uidk^tiw "fco V 


\/\rf\to 

• 乂 1 — 

少 uidk 七 irue "to lA/ihdows 
Media 3hd /VIPE^ fahothcir 
video 





Hos 七 m3 ouv videos y/*rtK V'\^to v/ill 
leave us move spade ouv ovm 
1/VovdPvcss sevvev, ar>d *rt makes rt 
easier *to sKav-c ouv videos advoss 
o*tKcv* sod'idl y>c*tv/ovk*m^ s*i*tcs. 


You ddr> w cmbcd W youv videos oy\ youv blog 


OS OY\ youv I 

*fco 


y/i*tKou*t *to upload 

WovdPvcss. All youv video lives oy\ V'^tos 

av\d be addessed -fv-om a^yv/Kcvc. 



iMrdciiair 

l Ji 晒翻 


-■ 


Vimeo server 


Let’s take a closer look at Kow video 
Hosting worfe, and whi embedding 
your video really mean. 
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Vimeo hosting 


Hosting with Vimeo 

You’re probably pretty familiar with the concept of hosting by now. With Vimeo, that means that we 
upload a video file that we want people to be able to view, and that video file lives on a Vimeo server. 
Vimeo then provides a URL (on its own site) where people can view, play, and even download the video 
to their own computer. Hosting with Vimeo saves us space, and they take care of worrying about having 
enough servers to allow tons of people to watch the videos at the same time. 





video file on 
your computer 


You unload youv video -f ile 
-to -tKc \/*imC0 sc\rvc\r. Youv- 
WovdPvcss y/cb scv-vcv- \sr!{, 
mvolvcd m 




Vimeo server 


>wKo ky>oy/s youv 
vidco^s URL (ov scav*dKcs 


-fov *i*t) vc^ucsts *i*t via *tKc*iv 
bvoy/sev*. 



www.vimeo 



.com/1234567 


i^EaivO 



Tmamk Ih UdHi _ 



\/*imCo W Cmbcds W youv Video 


m*fco 3ir> ttTAIL 

stv\ds tKa-t badk -to people's 



bvov/sev-s. 


your video on Vimeo! 




So you keep talking about this 
'embedding” business. Whafs 
that really about, and couldn’t 
I just do that on my own blog 
and skip this Vimeo stuff?? 


You’ve got a point. 

Embedding a video means that it is playable from within a 
web page, including all the controls to stop, play, pause, and 
more. And yes, we can embed videos in our WordPress blog, 
but we still want to host them on Vimeo for now because it 
saves us space. Let’s take a look at how the embedding works 
with Vimeo so we know what’s going on under the hood.... 
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video and plug-ins 


Ov\Cc you vc unloaded youv 
video, i-f you move youv* 
mouse ovcv *tKc v-*i^ivt-Kair>d 
side o-f 七 he video you II 
SCC dir> W tw\bcd” U 七 hd*t 

bvmgs uf *this sdvccv>. 



Ewbedded 

viJe^ up cl^se 



Embed this vid^o 


x 


Vi 

■' b VPHB- 


ir：^n I rfa M|hphi 

j ■■ .wm vi !Hnui~ai■■■T^pujnK r rf —"' i^^i* 


&§«■■"'dhi 


'■I mB , |r aa- s^islBr l ^ 9 mm wm£f 

%> ka*mfeflnnhB^^an ■: rvw wfyhv^. ■'■• -^Ka'■■■■■ 

jmh w v_ 

r »™ h«- u D j. B p_iw a^, %« 4 u« 

■ hi r*nitHB**# ihhhbhhbhb-B ra^n whi rr■■rtkvwmn 


I f&'jr *' B ^» 4 djid 1 





■ !■ ■ v_ i ■ *■ 

wim, enur 


f>T w I pr« .' 


Vfl 


\/*imCo skoy/s you dodc 七 you d3v> 

_ _ dopy a^\d pas*tc nvto a pos*t oy\ youv- 

\/^ blo^—its essentially *tKc same dodc 
*tKcy use *to embed youv video oy\ 
*tKc*iv s*i*tc. 

You also yt a fvcviow o( y/V>a 七 ••七 
y/ill look like embedded *m youv- s*i*tc, 
y/i*tK V^tos fUy/f3usc> volume ； 
ay>d -full-sdvccir> doy>*tvols, d\ov\^ 
y/*i*tK options -fov people *to dopy 
-tKc URU shav-c *rt WrtV> o-tKev- 
pcopIc ov y/cbs*i*tcs. 


TK'is pav-*t *tKc embed Co&t 
spcd'i-fics d ^ood sizjC -fov fu 七七 1% 

•m mos 七 blo^ posts or y/cbs*i*tcs. 

<object width= M 400 M height= M 225"Xparam name= M allowfullscreen" 
- ^ value= M true" / > 



<param name= M allowscriptaccess M value= M always M / > 


Wtre \/*imCO IS 
dctlavm^ *to youv- 
bvov/sev *tha 七 I 七 is 
scv-v*m^ uf 3 video 
(ov w mov'ic W ) is 
usm^ PlasK (a -tool -fov 
dvcatmg a^imatio^ oy \ 
y/cbs*i*tcs) *to add *thc 
play/pausc buttons 
av>d o*tKcv dovrbrok 



<param name= M movie M value= M http :// vimeo.com/moogaloop.swf?clip 
id=12345 67 & amp;server=vimeo.com&amp;show 一 title=l&amp;show 
byline=l&amp;show portrait=0&amp;color=&amp;fullscreen=l M / > 

〈embed src= M http :// vimeo.com/moogaloop.swf?clip 
id=982222 9&amp;server=vimeo.com&amp;show_title=l&amp;show 
byline=l&amp;show portrait=0&amp;color=&amp;fullscreen=l M 
type= M application/x-shockwave-flash" allowfullscreen= M true" 
al1owscriptaccess= M always M width= M 400 M height= M 225"></embed> 

</object> 


/W 七 iVis allov/s people 
-to ^lidk a l*mk oy\ youv- 
video ar>d viev/ i*t m 
-full sdvccir> mode- You 
da 的 disable *tK*is by 
dha— % *tKc value bo 
lalse” 


<p><a href= M http://vimeo.com/1234567">How to Sous Vide Meat</a> 
from <a href= M http :/ /vimeo.com/TFM M >Thanks For Mutton</a> on <a 
href= M http :// vimeo.com M >Vimeo</a>.</p> 

Lastly, *tK*is puis a l*mc ^Atr i\\t embedded video 
七 V>a*t lists iis title ar\d youv w byl*mc/' v/IVWis youv 
y>3me Imkcd *to youv* ma'm \/imC0 fay. You CBy\ 
dclc*tc *tKis i-f you do^*t v/3^*t i*t *to sKo\w up. 
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step by step 


Upload your video to Vi_o 



Create an account and choose a file to upload. 

When you click “Upload a video’’ you should see a pop-up dialog box 
that allows you to choose a file on your computer’s hard drive. 


Upload a video 


AH this will be vcpbtcd y/ith a 

yroyress bam -to let you khow how 
the upload is — 3 . I 七 should /七 
take -too 


/ 



ffultmi ^ Try m *ik >jt phew 


Tire rules to Follow 

I Uptaad WILT vHtoi ^tuu Gf si ml Hw rTK-ffii#FY 

pirmlmi.lom Lo uplojid, 


VUiodi Imtndtfl tar CMTimdrcLkl im 



sMIfn 


ham En ifmar vlil 

■n^p>nflFd ^nrnArhi^ 


iidcDB Ie 

i«-lhnAt 


VIm»l 叼 Rilll unr 


SlJll hriLvn qunliiprii? 




Ui ln? ■ ma[bll« 

v4p >fvnpi 

•ui.ip-3 9«i^up.vimH.CB3 


GQ 


L«_m mvm .b 謬 ut MC 

Ph^iL% pvt Vlrti^q HP 
fq『mern IJrib Jncfc rnTm-oArm 
Up9. 



DoiVt forget your metadata. 

Once you’ve selected the file to upload, give it a title, description, and 
maybe even a tag or two if you’re feeling really meta. 


Finished uploading! Goto video 


Tula 

Dn-SiC-npilort 



Ccimcnrii ULfmiKvS UmlL Lo ^hiirfirSrns- nr&Eli all hAgpi 



/ou rwight waht -to skip this, but you 
shouldh't. A <\uidk -title Bv\d dcsdv-iptioh 
Will kip olk\r people -Pihd ahd y/aldh 
you\r vidco-ahd thats the poiht, Hgh-t? 



172 


Chapter 5 






video and plug-ins 


http://yimeo.conn/li6I3457 



Or\tt you VC y/a'rtcd youv 
youv* video is veady *to Y ou 乙扣 
•f md |七 a 七 *tKc sKovt V'\^to 
URL (y/K*idK IS jus*t Vimco dom + 
*tKc IP of youv- video). 


You 


You can upload and embed videos on YouTube 
just like you can on Vimeo. If you already have 
an account with YouTube and already host your 
videos on their service, feel free to use them instead 
of Vimeo. If you need help uploading video to 
YouTube, check out: http://www.google.com/support/ 
youtube/bin/answer.py?hl—en & answer—57924. 


parpen your pencil 


Upload the Thanks for Mutton video to Vimeo and then copy and 
paste the HTML code from Vimeo to embed the video on the 
site. You can download a sample video from the Head First site at 
www.h eadfirs tlabs. com/Word Press. 


Now we wait... 

Vimeo has to process your video to get it ready to look awesome on the 
Web —— so you have to wait in line. There is a pay option to get bumped 
to the front, or you can sit back, relax, and enjoy your totally free service. 


Waiting in line 

This video will start convertinq in approx innately 00:29:30. You can leave this paqe and we will emaii vou 
when this video is ready for watching. 


H usually doesn't take -this lo^. 
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sharpen solution 


!|^drpen your penci 

Solution 


Upload the Thanks for Mutton video to Vimeo and then copy and 
paste the HTML code from Vimeo to embed the video on the 
site. You can download a sample video from the Head First site at 
www.h eadfirs tlabs. com/WordPress. 


❶ Upload 

Just like in the example, get that video uploaded with a title and a description. 
Once Vimeo has processed it, we can embed it into our own site. 



be disdouva 
usually ^ocs mudK 



Waiting in line 



i 


This video will start converting in approximately 00:29:30. You can leave this page and we will email you 
wlien video ia- rtddy fuir wdli_hiiiy L 
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video and plug-ins 



Copy the embed code 

When you mouse over a video the menu options appear. Select the 
“embed” button to bring up the code dialog box. 



n s saw cav-licv-, -the embed CoAt 
pUdcs d video “object” ih you\r blo< 
sdd "the play/pause bu-t-to^s o] 
"this Copied m*to ou\r si 七 e. 



Paste into post 

In the HTML view for a new post on Thanks for Mutton, paste the 
Vimeo code into the post just after the top line of text. Save and refresh 
the post ― you should see your video! 


l|pl4<ai|/litG»iT - a J5 • 


Ilf Ml 


I m% 


i&il _ 


l^ihj|f|i tMsp, 


Ip "feMarcVRf TTii| li jjfiiuF rvill fdil -nr d^lrlp ll a ^h，rt MiiM 

-cofcjcci *frdih-"40fl ,B cfurimrn 疊 vjlLnt_ B Tf^ft n f> <|ur>m 

ji uniivr-liWI" f> ^pMim 

¥jlut ^liLlp./fvirmtdm/mlii&Bihwp.iiif 11 

dip.ld-ILbSS^S 7Aimp i4#vcF_virn«>ti ■ 亡 Amt^nip sNhiiLMh _ flAjmp ■Mjinvihb^jpArtrbl 

， 0£iijmpx 典 r«p(MLPfFAjhmfi.l!ulLirir 禮 JTxf-mbfd irc-^hcnp Si^m^.^4}m{mQQqM\QQ{i -i¥rf7 
i|liP-ld，l 7Ashmp fi^iWPr-^wiiTira ，— tufu' Ijlf* - lUiimn a khow Si ■ inf ■ |t0rl^vjj1 

■QLiinip^dkif-OOAfitfijrnp.full 9 rC!Hn_ r IliKkwAve; ■ fh^h a 

4mM f grf 4 n - m rn^T 

^(qNi - "JS STb- 4 /irabid^ 4 ||Sh -«i J], ICf ^VSiF^Wfiiirvg i P441 in 

Wfirdprt is- i<{4?- frnfTi <m Virf4 BB hUp.//vim«_di^_/jihirTQ>_ ?iil li rSi ! u > fiMi l ■黔 _t 

Jirer_Tinp, s r/Mln i '«>.coiT' B > Vim*M </ 矗 > ■ c/p:* 


IS 


luf pa«i» b|r hAniffi on 他 m KIO ax 4 SI pn 


It’s ir^poirtaht *to be ih 七 he 
HTML view y/he 灼 ddd’mg 
this Code {jo youv posi -]( 
you do i*t oh -the \/isudl side, 
•i wo " 七 Y/o\rk \rijh 七 . 
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now we 1 re moving 




Which is better, Vimeo or 
YouTube? 

That depends on who you ask. 
Vimeo is a smaller site and emphasizes 
higher-quality, non-commercial video. 
YouTube has a larger user base and 
much wider audience. Check out both 
services and see which one works best 
for you. 

What if I don’t want people 
embedding my videos? 



There are privacy settings that 
control who can and can’t see your video. 
If you want you can password-protect 
videos so they can only be seen by a 
select group. But allowing other people 
to embed your video means more people 
will see it, and in most cases that’s a 
good thing! 

Can I remove the Vimeo logo 
from the player? 

Not with the free version. Vimeo 
needs to get a little recognition for 


throwing in the servers and all that 
storage we’re using. To get logo-free 
embeds, you’ll have to purchase the 
premium service. 

Can’t I just upload videos to my 
WordPress server like any other media, 
and embed them from there? 

Funny you should ask... We 
actually do cover that in the next chapter, 
so stay tuned for more information on that 
in a few pages. 
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Wouldn't it be dreamy if you could add 
Vimeo videos without having to copy all that 
code? But I know it's just a fantasy... 
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a plug for plug-ins 

Plug 一 iws make working with other web services easier 

WordPress itself has a large, but ultimately limited set of features. It does all the basics and 
way more, but it couldn’t possibly do everything everybody needed it to do. So, the WordPress 
developers built a system where other people could write new features for the platform and 
then include them in WordPress as “plug-ins.” 


is a set o( -Piles 七 ha 七 
“■talks” "to IA/bv-dPv-css adds special 


Pod Press 

PodPv-css helps 7 
you "tuvn youv- blog 
iivto a poddastmg 





TWis m domes W\i\\ WordPress 


Akismet 




办 WwiloiLr 








m 




bHiH ! UllM 

fmka 

Pne hi p ftnr 

; 二 . 

1E ■: n- 

L'lppm hi^. Ifa 

1-UiH 


01 ma 


■itedhl 1 


£ 



BuddyPress 


Buddyp\rcss is a lairgc plug-ih that 
■tu\rhS lVo\rdP\rcss ih-fco a sodidl medid 
Site, allowihg usc\rs -fco shav-c media 

3hd ih-tev-adt witliih IVov-dPvcss. 



Google Analytics 


M 




WP-Super Cache 


This pluj-'m uses 
"to help ouv* blo^ vuk> 

-Pastcv-. Well comct -this a 
bi-t la 七 ev" ’m 七 he book... 


V\r/\to Shov-t Code allows 
you "to ddd l/irwco video 
"to youv si-tc wi"thoiA 七 
hav'mj -to dopy dll ihc 
Crwbcd rwav-kup -fv-orw 七 he 
si"tc- AH you t\ttd is 七 he 
video ID. 



Vimeo Short code 


TTievVs a pluj-m -Pov- easily micgv-atmg 
google A^lyti^s nvto youv- blo^ so you 
leam mov-c aboui 七 he visi-tov-s ihai av-c 
"to youv- si-tc- 
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video and plug-ins 


Find a plug-in for almost anything in the Plugin Pirectory 

WordPress is “open source” software, meaning the code that runs the program is free for 
anyone to use and look at. Projects like WordPress only succeed because of a large group of 
contributors that donate their time to make the software better. Some of those contributors 
extend the functionality of WordPress with plug-ins and then add them to the Plugin Directory 
for others to download. Here you can search for plug-ins that will add extra functionality to 
your blog and see ratings and reviews of those plug-ins from other WordPress users. 




Plugin Direrton 


The Pluj'm DivcdWy looks a loi like 
ihc Theme Divcd-tovy 如 d allows you 
"to scav*dh (or 'ms ov\ -the si-tc. 




ru'jw 



nirpetor^' 


"JiPU 




|-f you^vc y/V"rt*tcr> S tool flu^—you 
should sKav-c *rt *too- You v>cvcv ky\ovi 
y/Ko bcir>C-f*rt -fv-om youV idea. 


•■n 麵 iF Ih Kart 甲麵 !■» N 

Sr** ■ 


^ * 




pluj—m has i*ts oym page whcv-c "the 
au-thov- pv-ovidc ms^briA 匕七|<> 咚 sdv-cc^shots ； 
and oihev m-fovrwa-tio^ 七 ha 七 mijlvt be hclp-ful- 
Y^u t^t\ also see i-f ihc pluj-m is domf>aiible 
wi*th you\r version o-P Wbv-dPv*css. 
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plug-ins up close 



Plugins Up Ckse 




wp-content 


All ar^d 

•tKcmCS v-csidc *m *tKc 
y/f - doyrt ⑶七 -foldcv-. 

TKc Hello Polly plu^-m IS Simple 

*fco -f i*t ildo diV"Cd*toV"y 

vc^uiv-cd- This is also plu^—m 

w *tcmf la*tc w you dould dopy (ov w dloy>c w ) 

a 灼 d use as -tKc -fouy>datioy> *to dv-catc 

youv* ovm plu^—ms* 


plug-ins 





hello.php 



L” 



WordPress plug-ins live in your “wp-content’ 
directory (the same place we keep our themes) in the 
plug-ins folder. Downloaded plug-in files or directories 
are accessed here by WordPress, and they come with 
everything they need in here to run on your site. 


… 七 he pluj-'ms -foldcv- you should see ? ’rtems • 七 he 
Akisrwci 七 he Hello Dolly plug - m and a *Pile 

匕 ailed These av-c ihc ^Vov-dPv-css dc-fauli 

ph- 


•ms. 





Akismet 


Akisrwct is oiav mdm sf>dnr\—pi%- 
•m av\d heeds a dived-tovy -to hold all -the 
•files dssodid'bcd v/i*th i*t. 


6 


index.php 


The \oy\t -f ile just Kcvc *to display 

a blar>k i-f someone *tv*ics *to cy>*tcv- 
plu^-'ms divcd-bv-y -fv-om 七 he Wo^str, bcdausc 
all *tKc -f iles *m v/p-toy>*tcy>*t be addessed 
-fvom a v/cb bvov/sev. 

Poh'-t be shy, thcv-cs plchty of 
roovtx -fo\r mo\rc flug-ms ih he— 



Plug-ins are powerful tools, but don’t go crazy! 

Try and limit the amount of plug-ins you use to only the essential features you need to 
run your site. While powerful, plug-ins can cause incompatibility with different versions of 
WordPress, and can also be a security risk if a plug-in is not used or developed properly. 
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video and plug-ins 


Prowsc awd install plug-ms from withiw WordPrcss 

Although you can download plug-in files from the WordPress website, upload them to your / wp-content/ 
plug-ins directory, and activate them from the admin panel, that’s a ton of steps to get a plug-in up and 
running. An easier way is to use the “Add New” feature within the plug-in menu to browse the directory, 
and then install and activate your plug-ins directly from WordPress. 


0 Pl ufiins 

Plugins 
Add New 

Editor 


(or add'mj 

•{Vom v/i-thm lVo\rdPv-css is mudh -Pasicv- 
and easier -tha^ a manual upload. 


ut I heKmty U&dut# 


^ WoitlKma-. Yfty mjy JLFtcimiijuil^ I 时 U1 plugins; 


■upi»d j plu^lfi 


S^surch 

Smirch ibf bf £,^»喊 lurAiv, or 网 . 


rrPa fluglni 


Pvpulnr tugs 

Ymf mMy i /10 frrnwxc cv? tfm mmt pwiwb^ u 讲 At 

admin 雖 I td&i^je mUyifl 

buddyprgsi buiiiyn categiprio catcgorY tna mdg pomn^Biit COrnm^ntS contenE CSS ⑽咖 das^taMnd 
diLabDc ikliuiruii DlSr} Ed^ui CmiLlI Embed oi-tIj F ：i TTuJl fiickr FarinvUin9 讲 90^9^ 
iitini jjTiag e ilT>a.Q 6 S inMnaian latfaACFUll Jaueiv link IlflkS llil loam media rntnu -tmu 

phclOS PlCtUf.S (HctUJ^S plugin Post posts gjrtCfl.rp 

ris Mgjtr&h ioeuritv Seo s>w« shortcode S Id^bsr nidiihaw social soam SU [ 化 tics SIJIS tag PCS 

Mrrnim im themr mm ucl mu£ min wdeo Wid.Q£t widgets ^Qj-daress 卿 

vou tubi 


iSe 


Find the WordPress Vimeo plug-in (Vimeo Short code) and install it on the Thanks for Mutton blog. 
You can use the “Add New” plug-in feature to search the plug-in directory for Vimeo Short code. 


WordPress 




Plugin Directory 一 …響 



P.i^poi nn ntnd HDiUKiq ^na liti hmia-r. In ihr ! 4 nL IWhIh ■ 

urinpirr vn^ twlk qlrai'ni.>pil 1 | Ji#. £HdS irrj'uvl M4I 加 Ivd Lkf 



you are here ► 


181 












exercise solution 



Find the WordPress Vimeo plug-in (Vimeo Short code) and install it on the Thanks for Mutton 
blog. You can use the “Add New” plug-in feature to search the plug-in directory for Vimeo Short 
code. 



❻ Install 

If the installation goes as planned, you should see a message telling 
you it was a success and then options for activating or returning to the 
installer to find new plug-ins. 

茂 Installing Plugin: Vimeo Short Code 1.0 

Dftivnlnfljding IRi^mIL frfirn hl^tp : DAd 1 . wnrd^rf' 1 1. ar^/ plugin/ ] nr-d - ifurt c adr . 1. n. ri 

unpac^Fn^ <!w euc^c 
Init^lln^ p4u^ln... 

m 以 ailed plugin ^hnn Codr I.O. 

AjciIdik ； ActiYJtB Pfufiln I IMlum IQ FI win ■nitdJIur 
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video and plug-ins 


o Activate 

Before we can start adding Vimeo videos using this plug-in we need to 
“activate” the plug-in. This allows it to actually work with WordPress; a 
plug-in can be installed but deactivated, in which case you can’t use it. 




Use the features in posts and pages 

Now that the plug-in is active we can use it to add Vimeo videos quickly 
to our blog posts and pages. 



This p|u^-*m alloy/s us *to 
spcdi+y \/'irwCo video 

IP i-t -fills *m all *tKc 

dode (or us. 


B 


I 二 L| - 


7 t J 二 


Welcome to W ordPrcss. lliis is your first post. Lidit or delete it p then start blogging] 
[viiEitfo dip^ it!=11655957 \vidl]i=6^|u tiei^liL^|] 


lA/is add hcijlvt wid*th attv-ibu-tes -to 

rwakc "the video *?1 七 ouV" ovm blo^s spcdi-Pid layout. 
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keep it simple 


Vimco short code 

Some plug-ins are very complex, and some are quite simple. The more complex plug-ins might 
have menu options (as with many software programs), and some might just do one simple 
thing and require very little interaction. The Vimeo plug-in has no menu items, and you can’t 
configure (or change) what it does. The amount of functionality it offers doesn’t justify a menu. 
All you need is the video ID and a height and width value, that’s it. 


七 he simples 七 pluj-ms o-f-fcv 

■the rwos-t -Plc^ibili-ty av\d do^-tvol ： 




\ imm NNnrl 1 

EhKPim^r ih^Ijiihs ⑽ : 十 , Stan 

Auihori ： ftp 

A 墨 ih* i|> w f ntp-l V'MM [ifH b ^ iknincD^P 

『禰口 bip Hitkn V rr«'i 饮 pnm vi iLn^ncd is ibopx cMta jHinb^is. 




A Pa , I 


,iWtHil itZMir 


PTI 


ilA 


iuf^ N»«up 


El 

D 


Hcvc Kavc *tKc ab'ili-ty bo manipulate *tKc 
s\zx Jc o\a>t video av\d pladc *i*t a^yv/Kcv-c *m 
ouv pos*t ov pa<jc- Ti^a*t simple -featuve dar> 
be vevy pov/cv-rul 







B 

T 

AM 


i— 

•i 

1 

1 一 

1 一 



门 




Welcome to WordPless B This is your first post. Edit or delete it, then start blogging! 


[vimeo cIip_S(J=]i 6 .^f ^7 uidtb= 64 u heigjit 


Patfrp 
Word count: 


LJrjft s,ivEd si U 1 ^ pm. Lae I 
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video and plug-ins 


Are plug-ins dangerous? I’m 
basically installing someone else’s 
code that I don’t know, right? 

Yes, you are installing someone 
else’s code—but most plug-ins are vetted 
by the community and Word Press does 
some screening of plug-in developers 
before they allow them to post. Your best 
bet is to read the user comments on the 
plug-in and try them out before committing 
to using them on a production site. 




Can I write my own plug-ins? 


there jctre nQ o 

Dumb Questi9ns 

Yes! Writing plug-ins is a great way 
to become familiar with the inner workings 
of WordPress. You can use the Hello Dolly 
plug-in as a template to get started—it’s 
made to be “cloned.” Then you can poke 
around and start figuring out how plug-ins 
work from the inside out. 

Do plug-ins affect the 
performance of my site? 

Yes and no—it depends on the 
function of the plug-in within WordPress. 
Anytime you add functionality to 
WordPress, it will need to use resources 


to make that functionality possible. For 
example, if a plug-in needs to talk to 
the MySQL database, that request will 
(slightly) decrease the performance. It 
probably won’t be noticeable, but all those 
small performance hits will add up after a 
while. A good rule of thumb is to always 
test plug-ins before you use them on your 
live site and only activate plug-ins you are 
actually using. Check out Chapter 8 for 
a ton more detail on how to improve the 
performance of your WordPress site and 
keep it running fast and smooth. 


parpen your pencil 


Create your first real video post using the Vimeo Short code plug-in. 


You 




l*f you p\rc-Pc\r -to use V^uTube ov already 
have videos on YouTube, scavdh -the plug- 
•m div-cd-tov-y -Pov- a sirwilav- plug-m 
加 bed youir YouTube Videos m ihc post 
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sharpen solution 


f^jarpen your pencil 

Solution 


Create your first real video post using the Vimeo Short code plug-in. 


© Create a new post 

Create a new post and give it a title 
if you wanted to as well). 


，ou could just rename the test post 


Mutton Chops 


Permaliiiik: http://thanksformulionxom/2010/01/mutton-chops. 


Add the Vimeo Short code 

Now, in the body of the post add our short code along with a width of 
640px. Add the height attribute and quotes but leave them blank. Our 
plug-in will calculate the height automatically. 


Upload/Insert H ^ O 



II I 

= i- it 

一 z — 

_^ 1 - _■■ 1 - _ J \ 


[vimeo clip_j12646053 widtli= pr 640 pp heights"" 


l-p you leave ou*t *tKc or i\\t v/id 七 a*tVibu*tc 
•rt y/ill mess uf> siic <Jc embedded video. V^ou 
should c*i*tKcv leave bo 七 oW (rt v/ill use 七 ^ 

dc-(*3ul*t s*iz^) or use bo*tK as y/c 3V-C- 
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video and plug-ins 


Thanks for Mutton 


Ot\tt you publish o\r pv-cvicw the 
page, ou\r shoirt todt will be 
v*cpladcd with the video wrapped ih 
a l/ir^co playev-. 



0 
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Ljmvu b Ffccpajr 

Voir I Mil iJdm md\ tBi Ik HcsfsrH AeUi bte aKEwi h 



Ybumii mw vVS^Ewr « 

^i^pija dk- I#|'f CVHt* ■ _ 

rilgH 94 alLFI 


bILTTjIII^ 


i^lii 
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supplementary stuff 


Add additional content and files to your post 

We want to provide the visitors that watch our videos a ZIP file they can download that has 
additional notes on the video and the recipe associated with the video. Kind of like Thanks for 
Mutton to go! A ZIP file has the extension “.zip”，and is what people call a compressed file. It’s 
like taking a bunch of big plastic bags and stuffing them all into one smaller, more compact 
bag. The resulting file is actually smaller than the sum total of each individual file. That means 
it takes up less room on our server, and is quicker to download for our visitors. Most computers 
come with software to help you zip and unzip these files. 



I/Vc add ouv- Z-IP -Pile {jo 
"the media libvavy l/VovdPvcss 
as a I’mk ihai people cav\ t\\tk 
oy\ bo dovmlodd 1 七 . 


Well Y\ttd *to add sKoy/ v\oits (or 
/ video- TK'is just be ouv- fos*t. 
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video and plug-ins 


Use the media gallery to attach other files 

We are not limited to the types of images we upload to the media gallery. We can 
include ZIP files, PDFs, and other document types for use in our posts and pages. 


IVovdPvcss v-cdoghiics this as a 

ZIP *Pilc 3hd dssi^hs "the 

i 匕 Oh <Po\r the gallcvy. Out this 
is ih ou\r lib\ra\ry, wc use \i 
as a dov/hload ih ouv posts. 


This is tailed 'Wtadata” ar>d 
^rcpvcsch-ts ih-Pov-rhatioh about 
gum data -Pile fih this dase a HP 
-file). You dould also tliihk o( 
metadata as data about data. 



Upload New ^edia 

ItoMe RIm d> yp4ud %d 


Mirl FiIm 

MUIFfbP>iip4G4dNt!U» ZUB 

¥«i jii v9lni m Fltnh up^h^ti. w 1 Trt ihf S ■㈣ jr yatoiifar -%i«eKl. 

ii Aif 9 turn puNm ^pvf #pdkf PMlrp pnf^pp^rtMipnp^ 


i# 


4 


Hill 






Itdc 


fill »»i= 

Flta T^fHL ftf»phJDCin/j p> 
Lq^Hd dait: .um 1 7 m «OID 

itn L 4v _ crw^MJ 


hn p: IV mi ih>u>hti _ dam ㈣ 0 s .1 HI 0 / Di mopt ■ i 

4p£^han nfiShp MrrirwVtf iW 

fekSB 


ivb\rdp\rcss assigns a URL io ou^ 
ZIP 右 le, so wc C3v\ o-Pfcv" i-t as 

a download whch people didk Oh 
the lihk. 


parpen your pencil 




Download the TFM.zip file from the Head First site, unzip it, and 
post the video notes text to the blog along with the video you 
embedded. You can then upload the whole ZIP file to the site so 
we can make it available as a download. 


The ZIP -file -Pirorw ihc Head Fiv-si siic 

匕 o>vta’ms 七 he v*cdipc and show no^tes -fov -the 
Mutton Chops video. U^zjp -the -Pile b> get 
addess -to -the ic^i -Pile -Pov- -the post 
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sharpen solution 


Sharpen your pencil 

Solution 




Download the TFM.zip file from the Head First site, unzip it, and 
post the video notes text to the blog along with the video you 
embedded. You can then upload the whole ZIP file to the site so 
we can make it available as a download. 



Add the video notes to the post. 

We can copy these in below the Vimeo short code. This content will 
display just like in any other post, just below the embedded video. 


IS i 73 O 

■ j * L= [E ^ E 麗 a 

[iietw dip_Ld-» beifhi _ 


VfMl 


■1 


泛 ■ j 


!i ddadoiu dUh umde with Lbc tib pdrtUis aFUie odull lamb. 
ciinuH, fkarticuinrly lemdci' beosuK Li dbnn^ grl au| 


M^lLtani d»p>> 

ItiVi mrwrntf Ebpfi 刺 i 】 

hutlad uy tbe teRoFHue iDultcm. Bresmsc iif tMf ^DHijwLy, tbe mat l» 画 tndc 『 
and RdvditM- 




! Uakfl with rn^ir cMnil ibg^Jl nxyll^D vti due- cbqp: 


bCEp: //c a.vriJcipnlja.c7 r^fwiki/ Lamb_ajid olij I pc// miileul fnxLnbouLcD 01/ • 

littpi //■? pedi^ELD wiki/Si debujrpj 

hi E p://wwirjcibdfwjmn/M 糾私 3 jpiw ■ mu t E d cm±htjhj «hrLnal 
httpi"wviw»5LiArdijMTj»,ii|^l 細 ㈣ ecyy ■ 的 DS/rHjry/jfl/fiMjdpjjiidjiiTic? 

tj^hjbojc"! 




1/Vcll v/arrt *to fu 七 ouv du\rsov bclov/ *tKc 
skov/ y>o*tcs so *tKa*t v/C *msc\rt *thc 
l*mk *to *tKc doy/y>load> i*t Will display 
fvopcvly *m 七 he fos*t. 



Insert a link to the uploaded .zip file. 

Place your cursor just below the show notes, as and open the “Insert” 
dialogue. Find the link you uploaded, and insert it into the post. 



Inserted -f iles sKoy/ up as I'mks- 
f v'isi*tovs y/ill *fco dlidk "them "to 


lioAjtnliyiidjd d 抄 j iwLahia^fit 期 


Po&lad In J TiMurn. lofcm 11 G&nrnanS | bdlt 
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video and plug-ins 



Thanks for Mutton 






UOM^lDiJ 、 : ld» Alld duQfm IMliiH 


u ： 9i54.1 i ： rwimiL1j[iD/i±a|MMniJ 


MutUm Chous 


Thinln far UyBon 


If immih I 


0\aY video is now play’mg 
pv-opcvly y/iihm 七 “e blog pos-t, 
i^c video K>o-tcs avc -thcv-c, a^d 
ou\r visi-to\rs CBv\ download a 
padkajc o( the video a^d v-cdipc. 
A^d bemuse weVe us'm^ -the 
Sho\rt 匕 ode pluj—m, i^s easy 
(or ou\r Y/\riicv*s -fco add iheiv- 
own videos -Pv-orw hc\rc ov\ out 


Jh*nkf. tQf Mutton 


This is great! Were 
definitely going to 
start adding more of 
-v these. 


Vjpim ViOinh- 

MifSIan r^:pi irr , ELrLidppE dUh midp mi£h thr Kb rndk^'i |n^a. TTii 

rf p Jv ttrirnd a ptUkukrb Ia4sr becauH-iJ: t *§dccJ uuL m b^rJ kPH^llM- 

Itfl BKL4IL Buwi oiltM iMOmiJ, dv TUMBi LI Id&Atr iUd CiWDfftlL 

Httv ■?，ienu lisiu vilJfa ixs4ff AjfLm, pJ^suJE rw^i-ng aaJ lb* chq^ 

y ■_ 4 m wlkjptdiiL 、也 i 1 L^nilu feed ■ rmitt o oiiltp W i-nuA urt codJihHJ b»m v 4>j^ouKy/ b_ m 山 : 此址 bi 

ih!l 妒六 ■ an-wik^iwltLb irri^ waJd/$ 


Yeah, and then it sure ^ 
would be handy if all 
our videos were collected 
in one place on the site... 
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categories cull chaos 


Use categories to create a video section 

Like we discussed in the last chapter, categories are great way to add context and 
organization to a site. We can also use them to create an additional navigation structure 
(with category-specific pretty URLs) for the Thanks for Mutton blog. 

Turn on permalinks. 

Before we can use categories in our URLs we need to make 
sure that pretty permalinks are turned on. 

Pennalink Settings 

Ry uif 、wph IJR1 ^ MhJcK haw qup^Ti^n mAilj、iinri \m\ af nurntwn m ihpin, htwpver WnrlPr，'' ynu chr 

jbHity £□ ueiUp i Lu&tam URL lUucture『or yuur EHrmdJirrkb jnd dr^hiv^b. This ljh lniprOT? usability, jnd farw^Fd 

rnmp^Nbiiliftv fit ^nur llsnki. A lumfrfs nf tiitn and hfr# ar— tn gpr ynu 

Common settings 

■: Day 肌 d name hxis^ :/ /ttunk^famiTiwi [wit/ 

0MoriiTh and name Int jj : 

f ■‘: NumfT'lc littfi: //lhMiksf^rMrttQnirCHw/iir^lilH^ix/113 

Q ^rriifrurr- /SHvcjr^/kmcrithniJiiUi 叫 stqjqd 




Wc dovcv-cd *tKis cav-licv'm book, so you 
should be dll sei- But make su\rc you art usn^ 

OY\t o( i\\C pv-c-tty f^rmalmk sc-ttm^s. 






6 ee} Bits 


If you select the "Custom Structure” for your permalinks, you can choose from a variety of tags to make your 
URLs more meaningful and easier to read and understand. Check out http://codex.WordPress.org/Using_ 
Permalinks to see all of the available options. 
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video and plug-ins 


Choose one category for videos. 

Because we’d like all of our videos to show up in a single archive, we need to choose a 
single name for the video category and stick with it. “Video” is the obvious choice, but 
you could use any term you want. 
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video category page 


thawksformuttow.com/catGgoriGs/vidGo 




‘如科 Mtp f 


Thanks for Mutton 




Kov/ v/Kcr> >wc ddd 


videos, *tKc video datc^ov-y 

pay Will display a title 
ar\A d shov 七 dcsdv*iptioy> 
(c%dcv-p*t) -fov* C3dK OT *tKcrw- 








Mutton Ch 响 




krjicipiu db^i nriiA* vriilk Ch^ rik pEKrlLan c^f l!kc hUs kt^j 

la'IiTtf UhAkt hufau. 1 !； ptmuhtJ cn\ h bnl uiapthc 




iK^ _V»## dl#4 - (■A'^4 J^UJUJ JW mafk\mUL. 
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video and plug-ins 


Use the "more" tag to clean up your home page 

While the excerpt feature works well for category and tag archive pages, the entire post is still 
showing up on the home page and that can start to get messy fast. We can use a comment 
directive, which is basically a WordPress command that we wrap in an HTML tag. Wherever we 
insert the directive, WordPress chops off the post and inserts a link that takes the reader to the 
full post when they click on it. 



Use i\\\s i\\t ftT/l/IL edrtov- *to sc*t *tKc 七一。以 fom 七* Pov 

>wKa*t displays 七 he Komc pa^c- 


Upload/lnsen H K J 3 Q Visual HTML 

b I link b quote del ins img | ul ol ll code more lookup close tags 

[vimeo efip Jd - width-'G^O" height-"] 

cl —— more 一 > 

Mytton chops are a delicious di\sb made with the riib portion of the adult lamb. This area of the 
animal is particularly tender because it doesn't get worked our as hard as say the leg of the 
mutton. Because of this inactivity, the meat is tender and flavorful. 



I/Vhaicvcv- 匕。的七⑶七 is above 七 his w </ -— move~> w taj will 
show up -the home page and 七 he wt will be available 
wh ⑶七 he visi-tov 匕 kks -through -to the post This is 
扣 easy v/ay -to ov\\y show videos a^d/ov short pos 七 
summaries ok> -the (vov\i page, av\d v\oi a o( oihev 


TKc Visual cd*i*tov- displays *tKc w mov-c w 
d*iv-cd*t*ivc sl*i^K*tly d*i-f-rcv-cr>*tly. Bu*t you 
da 的 add I 七 Kcvc as v/cll. I Vs *tKc ^oy\ 

七 ha 七 looks like a small bo% oy\ -top o( a 
lav-y bo%. 


Upload/Insert 

0 


_ _ 

Visual HTML 

[b~]|T][^ [: e 

! 三 “言雪 

■| 1 HI # ^ 卜 1 圉 1 

■躧 •■■■ 

■■■■■ 

[vimeo dip_ids 12646053 width- 

”64 。，， height，] 

More.- 

Mutton chops are a delicious dish made with the rib portion of the adult lamb. This area 
of the sanimal is particularly tender because it doesn’t get worked out as hard as say the 
leg of the muttoa. Because of this inactivity^ the meat is tender and flavorftil. 
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lights, camera, video 
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video and plug-ins 


You’ve got Chapter 5 under 
your belt and now you’ve 
added video hosting with Vimeo 
plug-ins to your tool box. Next 
up, podcasting and syndication. 


BULLET POINTS - 

■ WordPress can handle many different file types in 
the media gallery—from ZIP archives to Quicktime 
video. 

■ Hosted video services like Vimeo and YouTube 
are a great place to host your videos, and from 
there, your videos can be easily embedded into 
your WordPress site. 

■ Plug-ins can be used to add extra functionality to 
WordPress. 

■ Most plug-ins are free and open source (like 


WordPress itself) and can be found in the Plugin 
Directory (http://WordPress.org/extend/plugins/) 

■ You can browse and install plug-ins from within the 
WordPress dashboard using the Add New plug-in 
feature. 

■ Single categories can help organize and separate 
different types of content on a site. 

■ Use category index pages to give visitors a listing 
or archive of a specific type of content. 




9 


you are here ► 


197 





It’s time more people knew about your awesome site. 

Your blog is humming along, and you’ve already figured out how to expand Word Press to 
manage an entire website. Now that you’ve got video playing there too, why not expand 
your audience base? In this chapter, we’ll discover how to distribute videos through 
Apple’s iTunes store as podcasts, and how to syndicate your content so that a ton more 
people will find out about your site (and keep coming back for more). 


this is a new chapter 199 



all the action is in iTunes 


The Thawks for Muttow podcast 

Now that we’ve got our video up on the Thanks for Mutton site, we need a way to get as 
many people as possible to see it. A great way to do this is to turn the videos into a podcast that 
viewers can subscribe to and download to take with them on their own devices. You might have 
thought that podcasts were only for audio —— but in fact, video works too and it’s a great way to 
reach a broader audience with your shows. Watch out Food Network! 



HvihifCiMM □ 
Umu AfiMjn 




Ri#*t y>OY/ people have bo dome *to S.rte 
{p sec ouv videos. Wc v/3ir>*t ouv sKov/s *to 
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podcasting and syndication 


WordPrcss is your hub for cowtewt distribution 

WordPress is a great platform to host a podcast from. You can upload all different types of 
media and you can build posts and pages that are a combination of text, images, video, and 
files. WordPress can also send that content to other sources like news readers and the iTunes 
Store through a process called web syndication. This means you can use WordPress as your 
main hub for content distribution —— giving you the power to get your content in front of as 
many people as possible —— not just to people who visit your site in a browser.. 


Wc dv-ca-tc all o-P ouv- 
\y\ Wov-dPv-css. 


Ouv- coY\itv\i Uy\ be v-cad 
•m v-cadcv-s like ^oo^lc 

Rcadcv- ^y\A by o-t^cv- scv-v'itcs 
like iTu^cs S*tovc- 
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podcasting and syndication 


The anatomy of a podcast 

A podcast is simply an audio or video program published periodically on the Web. People can 
typically access it in multiple ways, mostly commonly though it’s from a website or downloaded 
through syndication via applications like iTunes and Google Reader. Regardless of the delivery 
method, you need two things to “officially” have a podcast: first, you need some media —— audio 
or video will work. Second, you need a way to tell people that you’ve just “released” a new 
episode of your podcast. 


WoV"dPv"CSS IS all ⑼七 

podcast 






RSS -Peed is jus-t a di-P-Pcv-c^t "type o( 
•Pile 'tha't o-thev* dorwpu-tcv-s use "to 
"the oy\ youv- si 七 e. Alovc ov\ "this m 

a little bit.. 





卜 ov-dev- -fov- people *to -f md about ouv- 
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RSS -feed tells stW\Us like »Tu^cs 
6{oo^t Rcadcv- about ouv- Aow. 
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Podcast.com 


Scv-vidcs like iTunes av\A Poddastdom w subsd\r*ibc w -to youv -Peed 七 
pvese 的* t youv* poddas*t *to "tKciv* audicir>dc- you publish 3 podust 

episode； its doy/y>loddcd 3u*tom3"ti£>3llY 。的* to subsdvibcvs domfu*tcv*s. 
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real simple syndication 


RSS is owe way the Web syndicates cowtcwt 


The way that iTunes knows about new podcasts as they become available is through a handy 
technology called RSS —— or Real Simple Syndication. You might use RSS already in tools like 
Google Reader and NetNewsWire, and it’s also used by millions of websites to share and syndicate 
content. If you’ve ever been asked by websites to subscribe to their feed, what you’re really doing 
is “watching” for changes in their feed file. This file, an XML (Extensible Markup Language) 
document, gets updated by that site whenever new content is published. Watching the feed means 
you use some kind of service (like Google Reader or iTunes) that notifies you when a site you 
subscribe to publishes new content. It’s like the digital way of hearing the thump of the newspaper 
when it lands on your front porch. 
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RSS lifecycle 

The lifecycle of aw RSS feed 


O 



l/Ve publish d new pos-t Y/i-th d 
video \y\ *rt. 




WovdPvcss au*boma*titally 
updates ouv -feed *to vc-flcd*t 
-tKc y>c>w post I Vs s*to\rcd oy> 
-tKc v/eb sewev aloy>^ WrtK dll 
-tKc o*tKcv- l/vb\rdpv-css -f lics. 





web server 



Don’t worry about XML 

We will look at what is in the XML feed file in a minute, but the good news is that 
WordPress automatically creates the feed.xml file for you every time you create a new 
post. That leaves you free to focus on adding content to your WordPress site! 
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podcasting and syndication 


❹ 


\T\AY\ts dKcdks v-c^ulav-ly -fov cMa^ts 
-to ouv -feed ； ^n\\tv\ *tKcv*c is 
oi\t, *rt updates *tKc poddas*t lis*t *to 
vc-flcd*t ouv r\t^i video. 
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t%eRctSe 


To see how this works, find a video podcast you might be interested in and subscribe 
to it using iTunes (http://apple.com/itunes) or Google Reader (http://google.com/ 
reader). 


Boih iTunes a^d 
google Reader cav\ 
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Use whidhcvcv- you 
like. 
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exercise solution 




txe 

Soi 


iftciSe 

iiiiiOH 


To see how this works, find a video podcast you might be interested in and subscribe 
to it using iTunes (http://apple.com/itunes) or Google Reader (http://google.com/ 
reader). 
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veadev- ay>d Kds too\ sKav-*m^ -fca*tuvcs. 


Add a subscription. 

You can just type the URL of the site or feed you 
want to subscribe to —— Google Reader will handle 
the audio and video from the podcast. 

Browse for a podcast. 

Reader also allows you to search for podcast feeds 
and subscribe if you don’t know the site of the feed 
URL. 


Sca\rdhihg ih google Reader as Witt as 

better io kd tk S •心如 d paste 
it m to the subscribe -field. 


❹ Search and subscribe. 

iTunes has a huge catalog of audio and video 
podcasts all categorized to make it easy to find 
something you like. 



Download to iTunes. 

Once you subscribe to a podcast, new episodes will 
automatically be downloaded to your computer. 



iTunes has a yea 七 m-tev-pade (oy av\d because \i 

dovmloads podQsts on "to youv dompiA 七⑺ you -take wi-th you youir 
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podcasting and syndication 



As we saw earlier, the feed file is an XML document, which 
is a file containing data and tags much like HTML. Think 
of the RSS feed as a version of your blog that is only read 
by other computer programs, like feed readers and other 
websites. 



7 


<?xml version= M 1.0 M encoding= M UTF-8 M ?> 

<rss version= M 2.0 M 

xmlns : content= M http :// purl.org/rss/1.0/modules/content/ M 
xmlns : wfw= M http :// wel1formedweb.org/CommentAPI/ n 
xmlns : dc= M http :// purl•org/dc/elements/1.1/ M 
xmlns : atom= M http :// www.w3.org/2005/Atom M 

xmlns : sy= M http :/ /purl.org/rss/1.0/modules/syndication/ M 
xmlns : slash= M http :// purl.org/rss/1.0/modules/slash/ M > 
<channel> 

<title>Thanks for Mutton</title> 

<atom:link href="http :// thanksformutton.com/?feed=rss2 
rel= M self M type= M application/rss+xml M / > 

<link>http :// thanksformutton.com</link> 

<description>A Food Blog About Nothing</description> 

<language>en</language> 

<item> 

<title>Sea Bass Fish and Chips</title> 

</item> 

</channel> 

I 

</rss> 


1 



Jusi like \y\ HTML, 

"to dlose dll ouv 



This av-ea is 七 he “head" 
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Notice ouv blog 
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-feed as a y>c>w 


iiereiare no ^ 

Dumb Questi 9 ns 


feed.xml 


The o( 七 he -Peed -Pile 
|S doesh 七 rwaiicv- mudh — its 
whal’s msidc 七 ha 七 ’s irwpovta^t 


So is RSS only for podcasts? 

No, RSS can tell subscribers about 
any kind of new content published to a blog 
or website. 

Do I have to use iTunes? 


Not necessarily. It is one of the main 
ways to get podcasts, but if you only want 
to subscribe to a blog to find out when 
new posts get published, you can use 
any number of feed services, or most web 
browsers. 

So I can use RSS to find out when 
my favorite blogs get updated too, not 


just to let people know when mine is 
updated? 

Exactly! RSS is an easy way to stay 
up-to-date on all your favorite sites without 
having to remember to go visit each one 
individually—you can see all their new 
content right in your feed reader or a single 
browser window. 
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auto feeder 


WordPrcss publishes an RSS feed automatically 

As we said earlier, WordPress handles much of the RSS functionality automatically — updating 
your feed every time you add a new post. On top of that, most modern browsers like Firefox, 
Google Chrome, and Safari will detect any site’s feed automatically and display an “RSS” icon 
in the address bar. Clicking on that allows you to read the feed in your browser window. 
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podcasting and syndication 




Tost DriVq 


Let’s try our RSS feed with iTunes and to see if we can use that for our podcast feed. 



Find your RSS feed. 

Before we can test our feed we need to find the URL to paste into 
iTunes. You can find links to your RSS feeds in the Meta sidebar on t 
home page of your blog. They should look something like this: 


he 


U ddv> also tlldk *tKc RSS \Coy\ 

•m youv bvoy/scv*> as shovm o 灼 "tKc 
pvcv'ious 


http://thanksformutton.com/?feed=rss2 oy \ youv 

vouv -feed 


http://thanksformutton.com/feed 


se 七七 I 呼 ， youv 
_somC*tKiv>5 like 七 Wis. 


pevmalmk 
URL should look 



Add the feed to iTunes. 

From the “Advanced” drop-down menu in iTunes, select “Subscribe to 
Podcast...” and enter the feed URL in the pop up. 


Open Audio Stream... 
Subscribe to Podcast.. 


CrtMle iPod ur IPhune Vebbri 

「 * fcfflliM jI jfc ■ A jfc — 1 ^ i \i 2jtk m \r 

r ㈣ Subscribe to Podcast 
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Turn URL: 
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join ‘ 

Deal 


http://lthanksformutton.com/7feed =rss? 




Cancel 


OK 
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test drive 




Tesr DRive 


Let’s try our RSS feed with iTunes and see if we can use that for our podcast feed. 


Or\tt you add ike -feed, *i*t sKould sKo>w uf 
•m youv poddas*t list 




t ou know -thcirc^ av\ issue i*f you see a” e^la^aiio^ pomi 
kon -to -the fod^asi m the list Clidk -the \to^ -fco 
SCC -the c\r\rov-. 


a 


There no episodes Tar Thanks for V 

Mutton' v 

The URL rrught point to lc>it cnly episodes, or contain fiJc typwi 
lhat : Tunts cannot 


This is strange!? I know 
our videos are there, I can see 
them when I visit our site in a 
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Vimeo and YouTube? ^ ^ 
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podcasting and syndication 


Vimco doesn't work well with podcastmg 

Now that we want to start syndicating our videos as a podcast, Vimeo is no longer 
the ideal solution for video hosting. It’s worked great up until now, but the main 
reason it won’t work for podcasting is you can’t download videos from Vimeo, and 
that’s just what iTunes does —— it downloads the video from the site providing the 
RSS feed. So we’ll need to find another solution. 


fy f\ nuMi 
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What other option might exist for hosting our 
videos instead of something like Vimeo? 
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use your own hosting 


Vimeo is a great service for sharing videos through a browser, but it’s not 
designed to be a platform to host podcasting media (audio or video) that allows 
people to download files. The whole idea of a podcast is that your viewer or 
listener should be able to take that media with them and consume it anywhere. 
In order to facilitate that, we have to make our videos available for download 
over the Web and not just for viewing. We can use our own web server for that. 


Selfhosted 


Yimco-hostcd 
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podcasting and syndication 



(u：lSe 


Before our subscribers can download our video podcast, we need to get it up on our WordPress 
web server. Use the same process you did in the last chapter to upload a ZIP file to the 
WordPress Media Gallery, only this time, tell WordPress you want to upload a video. 


Media Library 


SairihRrtnHj 
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exercise solution 




E^eRciSe 
SotvtioH 


Before our subscribers can download our video podcast, we need to get it up on our WordPress 
web server. Use the same process you did in the last chapter to upload a ZIP file to the 
WordPress Media Gallery, only this time, tell WordPress you want to upload a video. 


o Upload the video from within a post. 

From within a post you can select which type of 
media you want to upload. Just like we did in the 
last chapter — select the “video” icon to bring up the 
media gallery uploader. 



Upload/Insert 固 H 


❹ Select the video from your computer. 

Add a new file and select the first podcast from your 
Desktop. You should see information about the 
video if the upload was successful. 



htt p://than ksfonm utton. com /wp -content/ ^ 


None 


File URL 


Post URL 


Enter a link URL or dtck 这 bove for preiets. 


Insert into Post Delete 


o Insert into a post. 

Once you have all the settings added, click “Insert 
into Post” to add the file to the WordPress editor 
and your post. 



Watcli it! 


Hosting your own videos takes up a lot more space on your server. 

Depending on how many videos (or other media files) you plan to create, you’ll want to 
check with your hosting provider and be sure you have enough space on your server for 
everything. You can always purchase more space, but that can also start to get more 
costly … 


214 Chapter 6 


















podcasting and syndication 


Where's the video? 


ttcv"c ; s uploaded ^i\dto 
s)ioy/nr\^ \ y \ \/>su3l cdi*tov* 

for ou\r y\Cvj post ； v/eVe 
almost *tV)C\rc...- 



But whch we take a look ai that 
post oh the site, we ohly get a lihk 
i^sc\rtcd ih-to ou\r post—the video 
is "tKcirc, bu*t hO"t ^ui"tc how we 
w^hted it/ y 




you are here ► 


215 










built-in embedding 


WordPrcss embeds its own videos too 


If we want our videos to look like the Vimeo videos we were using, we’ll need to use the Embed 
feature in WordPress. Embedding media in WordPress is basically taking the uploaded video 
and wrapping it in HTML that will allow it to play in the browser, just like we did with Vimeo. 
Even though it involves HTML, we can do this in the Visual editor. However, WordPress hides 
this feature in the expanded menu, so let’s find it and put it to use. 

© Copy the URL for your video. __ Ei 

You can find this from within the post editor. ^ 


■d iCSrpi 


• & 仏饮 咖七 Oh the lihk 
/ ihe l/isual t&\{x>Y, oy you dah 
-Pihd the -full lihk m Ik HTML 

cdi-fcoir ihs-tcad- 


❺ 


Expand the editor. 

In order to get to the embed functionality, we 
need to expand the editor. 

llpln^ri/an^pn ® # 
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Visual 
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Add the copied media link. 

Copy the link into the “File/URL” field and select 
“Qjiicktime” from the Type drop down. 


C\'\tk -film \Cov\ io bv-mj up *tKc 
embed mev>u- Do〆 七 (oryi b> dopy i\\t 
l*mk *to *tKc video. 
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will also need "to give -the 
video dime 灼 sions so 七 he whole 
shows up. Hcv-c v/c avc 
usii^ 七 he -full sizjg o-P ouv* video, 
but -fed -Pv-cc -to sizjg 七 his 
pvofov-tio^ally any way you like. 
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podcasting and syndication 


o 


Get meta. 

You can add even more metadata in the “Advanced” tab (which we always 
recommend), but for now we are just going to de-select the auto-play feature. 



air>y k*md of media 一 audio 
ov v*idco-s^a\rt a 

v'isi*bov lodds 3 v/cb fay ^3^ be 
^ir>d youv* si*tc 
unusable- Be douirtcous {p youv- 
v'is'i*bo\rs dr>d let 七 hem Att\At 
v/keir> *tKcy should dlidk w Play.’ 



Click insert when youVe ready. 

Once you have all the information and links entered, go ahead and insert the 
video into your post. We should see our whole video properly embedded in the 
post, not just a link. 




Now that we have the embedded video in our post, give the iTunes subscription another try. 
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exercise solution 




Now that we have actual embedded video in our post, give the iTunes subscription another try. 


CNfVfc 
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podcasting and syndication 


Add some iwfo to your (Tunes feed 

Although iTunes can handle standard RSS feeds, it needs extra information about the podcast 
to provide a solid summary about your video for users browsing for your shows (or similar 
shows). What we need is a special feed just for our podcast, one that has all the information 
iTunes needs to show our logo and extra information about our show. 


By dc-Pauli, l/Vov-dPv-css publishes a 
RSS -Peed o( all -the pos-ts 

*Pv-Oirw ouv- blog. This v/ov-ks jus-t -pi 
•Pov nxosi RSS veadev-s bvows( 


me 
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We Y\ttd a special -feed just (or ouv- 
poddast The issue is 1/VbvdPvcss o^ly 
^'ives us options -fov d -feed 3ir>d v\o 

C%*tv3 options -fov iTunes. 




f people that US rn the iTuhcs 
stove -to see a Coo\ giraphid a^d read a 
dcsdv-iptioh about ouv- poddast. 


iTunes 
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a feed to call your own 


Use a plug-iw to build a special feed for (Tunes 

Creating an extra feed is the perfect task for a plug-in. It’s not essential to WordPress —— not 
everyone wants to publish a podcast —— but enough people do podcast that there are plenty of 
options when it comes to podcasting plug-ins. It will create a special podcast feed for you as 
well as help you manage all the extra information you need to supply to podcasting providers 
like iTunes. 


Most plug - ins embed media and generate a special feed 



A1os*t poddas-fcihg plug—ihs will do 
the wo\rk "to you\r video 

•m*to WordPress, so -this will save 

us 釙 stef wkh addiha 

videos. 
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podcasting and syndication 


TS& Podcastmg Plug - iw 

One of the easiest podcasting plug-ins to use is the TSG Podcasting Plug-in. It’s simple and 
doesn’t have a ton of features, but it’s easy to use and just works. TSG gives us a single interface 
in the administrative window to add details about our podcast and automatically handles the 
publication of our iTunes feed. 



i»tB 




Tra-Ck ffl Giisr II , 
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OhC 


op-tio^s 


i^Jharpen your pencil 


Find the TSG Podcasting Plug-in on the WordPress plug-in page 
[http://WordPress.org/extend/plugins/) and install it on Thanks for 
Mutton. 
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^Sharpen your pencil 

Solution 


Find the TSG Podcasting Plug-in on the WordPress plug-in page 
[http://WordPress.org/extend/plugins/) and install it on Thanks for 
Mutton. 


iphmmhmhmJ 


riAilixpIp 

RBdd.pflD 


fcd 

,pcHlualJ#^ fEvd.Ffip 

QVilLiDUpy*v 4 ^ 1 .|^ti' 

# pBd|JMV^r-IJ C 1 « 5 ，> 

， pCrlUhU^q.^p 
if pdi EHf p. 1-1 rfl p#rfi-p. pftp 

• ^EiarK.M 

■内 

甘 ― |_! 球 ㈣ 
■■内 

m i^rwnwnrsai-%t^q 


Copy the plug-in directory to Thanks 
for Mutton. 

Just like before, all we have to do is add the 
downloaded plug-in directory to the / wp- 
content/plugins/ folder in our WordPress folders. 



You may need *to upload *t^"is usmj 

youv FTP v/ay, 

Lcds *to be m i\\t /^-Co^W 
plujms/ dwrttbo^ your active 
WordPress *ms*talla*t»or\. 


N turn SCO M M Mh^iiFC 


/ou also usc £ hc ^ dd 

七 Hire wi-thih the IVo^dPvcss 
dashboard -to ms*bll the plug-i h . 



Activate 

In the Plug-ins menu on the WordPress 
Dashboard, activate the TSG Podacasting Plug¬ 
in by clicking the “activate” link. 
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New Podcasting menu 

You should see a new option in the Settings menu called Podcasting. This menu allows you to 
edit all the different iTunes settings. 





General 

Writing 

Reading 

Discussion! 

Media 

Privacy 

Permalinks 

Podcasting 


V 

Y^u also add 
Podcast titles a^d 
desdv-ip-tiohs aloh^ 
with othev- 
dddi'tioh "to the 
iTuhes -fields. 






A Atom . 




， l 卿 I 


m'd rifl mqh^ w*l mu fna urn，■ 


I i 1 mam 


l^nPi.rf rt — ， WIP ^rmwm »* nffil 

liwi. pw-'i upiuv na jrp n kht U h 

I 




l^i i 


! ■ 網 I 


feHipp* 4 #- n 


I vrlWili I 


f.li 


■M WC-O-Uj* I ■■■■ I ■ 


! |rf a 


I Mi4Aa JiC. 


TWsWih 


iLEi 


iriM Fn wra Wr iHndmluTait 


AotlHi wdtn pfiocjr mrEjm HFip 4 xi ■■up. fir 罾 i ic^jn f pmr loinif 

fTkfw pinjn h# iiiaPac^ pHUfn hpufI vtw ■ 4 'u ml 鱷 dc m ■cjki i 


pvxfo^ir I 
KiA ■ r*" 


I 释 1/WPWU1：. 




iifrfl fTsm^paeku 


I i%rf 


DinfC wwm^ 


Jiff 


&r' HMJCI 7^1 MHP S» 

I Av pwn tvi ival uvavljrl puLn 


Umptia^a rP|yrui ha# "Pin 


n^iu mi m ta pa^r ㈣ and ■ faHd H|>hf Timi 




一 



TSG Podcasting Plug-in and Word Press 3 

At the time of writing, the TSG Podcasting Plug-in 
doesn’t work with WordPress 3 Beta when using pretty 
URLs. You have to use the default permalink settings. 
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plugged in embedding 

Use the Podcasting Plug-iw to embed videos for podcasts 

Aside from providing all the appropriate data to iTunes and other podcasting directories, TSG 
Podcasting also helps us embed our audio and video in blog posts. Much like how the Vimeo 
Short code plug-in worked in the last chapter, all we need is the URL for the video file that we 
uploaded earlier. 


o 


Copy your videos URL. 

You did this previously, the first time you uploaded a video and wanted to 
embed it directly into a post. 



fllla 

CapfilM 

E>cic-rip<lM 

Flta ML 


tf pp. 

Up 44 iU Aim: 

如 Hid pin 






iocjfitovi cifilAe JUl 




licv-c^s -the URL \v\ the lis-tmj -Pov- 
-file ih -the Media ^allcv-y. 
This is aK>o-thcv- way bo yt ii 
msicad o( irijlvt-dlidkmg... 





Podcasting post options 

With TSG Podcasting installed we now have a new window at the bottom 
of our “New post” page. All we have to do is paste in our video and link 
and click “Send to editor.” 


This \sv\ *t "the s3nr»c W £di'feoV" W ds 
•m 七 he Y/ovk-Plow -Pv-om Chap 七 ev ■ 午 . 
Instead -this jus-t means iha-t -the 
pluj-m is jomj b> put 七 he video 
crwbcdd'mj Code \y\ "the l/isual 
cd'rtov- -fov- you {jo wov-k Y/i-th it 


y^dcj^Eing! 


Fil€ 


h^ip:^/than ksfa r ff Lrtton.MRi conte P,t/up -fish-ind-ch pi. 


roi mai 

&rUul1 F-ufmsil. 

- Kev^erda 



Aulhor 


LETl^lh 

EjipIIeH 

S Dclfl^ 1 Cndcrsiun 


— — 二 . 

Fit URL 少 _ 

D«1j,uIc rarnnai 

默 

■ 

htd ■ 


TS^ Poddastm^ adds a i^ev/ w'mdoy/ 七 V>a*t Will 
Keif us add poddast media *to ou\r posts. 
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podcasting and syndication 


Heres that “short code" again... 

Just like with our Vimeo plug-in, TSG Podcasting adds short code to our post 
that will get interpreted by the browser when the post is published. 



丁 he poddas-tmj pluj-'m m-tcv-pv-c-ts 



Check your post. 

Just to make sure that everything is working, check out the post from a visitor’s 
point of view and make sure you can see the video embedded in the post. 



You should see a player similar 
{p y/V^at v/c ^ad ouv- VWeo 
video embedded m*to post 


The plug—'m wo\rks wi*th audio -files 
•boo. l-f you upload audio, you’ll a 
Y\\tc little playcv- like -this a*t -top 
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your podcast feed in action 


I 朽七 he same R£S dv-op doy/y> *m youv bvowscv (*m £a-fav-*i ay>d 
ov>ly) you should y>o>w sec 3 七 iVivd pod 乙 as 七 -feed 
addition *fco *tKc mam blo^ and dommcy>*t *fccds. 


OlA dnd ■tl'lpH I 




W 十 Jl/ilunJl%ll|iT71l1lQ-l,' 


Thanks for Mutton 


Thanks for Mutton » Feed 

omments Feed 


Thanks for Mutton & Comm' 


Z^Haa IUi I 


&B 3 Bafta Fish and CNp« 


■ Cuha-lf^HidCbpi 

■ Tbi Ci^fr F 1 n |： ^pf-lUi Id 



saa^ttM 

*— Th^ l^ai Pu/Jt Dap Dbli h i^ria^ 

LfravA a nap^y 

Lcffli^inaai： ulcadOr L^L^Ul? 


J 

ir lH DHTHm i 


^iCWliVHmTWri 


iFeE^Ik: IfeTEhs 


pn» EM ib . 


■ Hsyj 

■ J^sil 


■ BppIcf* 

■ Vr t»ii^-:r « 

MiiJi 

likeJ^KiE 

Kitrt#fl 


I 

I l^liAH 





Let’s adet some metactata about our 
podcast anct tken test tkis out anct 
see if it’s working witk iTunes... 
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podcasting and syndication 




Before we test our new podcast feed, we need to add all the extra information for iTunes. That is 
why we installed this plug-in, right? Also, let’s include the podcast banner image for display on 
the Thanks for Mutton iTunes page. 



軸 s Mutton 
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exercise solution 



Before we test our new podcast feed, we need to add all the extra information for iTunes. That is 
why we installed this plug-in, right? Also, let’s include the podcast banner image for display on 
the Thanks for Mutton iTunes page. 



Upload our TFM logo and copy its URL. 

We’ll need this to include in our iTunes podcast feed settings. You should 
be a whiz at this by now... 


Just like ^ ^»lc v/c use OL ouv* 

s'rtc, V/C V^avc *to upload iTunes "imay XO the 
^ s*»*tc bc-fov-c v/c c ^ y \ mtludc *»*b 


Upload New Media 


ChDM# fBti hi I 4 )teid 


,HI B，tlW ilflfcll jploi^RT 
AApi jT hd 19 


加 Kfca iimacr u bdn» 



-AlfMLKjlTIlH 

Hd ahL4i i^n! t 


Upi«d Mil 印 


iJf _f ^ar |hf .tt jpv •，子 Thf Mem {ru a 


■Tjpilm 


f>iKrlpc4on 


fill) UH4 




4dpilm j^aoiiM JlAf 


Si! fit 


iVe wair>i io -this lihk because well v\tcd b> 

use i 七 wc sdd "the iTunes iivpov-rwa 七 ion "to 七 he 

foddas-tmj plug-m. 

http://thanksformutton.com/wp-content/uploads/2010/05/tfm.jpg 
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Update the podcast settings in iTunes. 

We can include a lot of info here, some of it will be useful for people 
searching iTunes, and some of it is categorical info that will help iTunes 
organize our podcast with similar shows in their directory. 


Podcasting Settings 

用 Au^ 卿 faf fn* 6? 1TC - iSneSn^fa ii 4 itruit wvfr 

fffm hi WVfe L^i-cir oiff pa ifMn sad don't xtk uf 

rt> detvtop (?rxi 14^6 pn^ecf. 

fVickiai fcid addmr fURD ： hupj /} thinhiF^rmuicon-ec-rri/ TTc-td- »d{i!i 

Ti|lt: Thirrti" (k Murtton 


Dm 批 


P^dcdil tigllini. 


iTunes SpectFks 


N v«4jr &40€& 如 | li dlfi^nE i#iw vnur Mt, w utf-t 

Iliff food cxi^f .ibnuE iwihlng 

f! ^ut p54cM1 >>, |. Ijghn ii dilKWrima \h^n ^Cu y^'p. LigfinPs i hJngp Ihv Mg|l 


l/\fe ddv> pvovidc all sovb o( 
di-f-fcv*cir>*t m-fo\rma*tioy> *to 
iTunes ； -^vom ^oddds'b 七 •• 七 

3r>d 3u*tKo\r *to multiple 
datc^ovics (or ouv sKoy/s b 

-f i*t m*bo- 


SuFTlTijr^ 


rd hive Ed inLf Shia ii juit -ibi?uf the bif^E padcuC 


A^lhor 


A. eIvIji 通 iIfij riplipn $1 frii^r pn^rjiLl. If l 
mmM tpf umd IP nu ptmmiLF|F -frdHf 

Thi MLrttom 

The tfcrujlE uKar oP 和 ur f^tjae. 


,MP |g 4,00^ jntl Ihp Lugpr 


^adcui An fURLJ ： 


MCp / /Bhjnkifarmall^.c^/wf]-CDnlf-nt|iijptead 

hn mrju, vtiif Ft rpiu_、_nlii ikhSe j.il i Turim. Ihk imjap fin hi^f nmlcji 1 ! tSsmi 


Add *thc URL -the av-tv/ovk v/c ju 
-to *tKc Poddas*t /W 七 scdtior> a^d also 
spcdi-fy a*t least oy>c da-tc^ovy. This 
(\y\A ouv poddas*t iTWs. 
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podcasting and syndication 


Fccdburwcr gives you podcast stats 

Feedburner is a service from Google that allows you to promote your feed to a wider audience 
and see statistics on how many people subscribe to your podcast. The service uses the RSS 
feed you already publish and gives you a feedburner URL to hand out to subscribers. Your 
viewers and readers can then choose how they get your content and Feedburner keeps track 
of everything for you. It’s kind of like the FeedBurner version of your feed becomes the actual 
main feed for your site’s content, and your original feed becomes a private feed that only you 
and FeedBurner know about. 



Fccdbuv*y>cv* v/ill youv subsdv*ibcv-s 
butto ⑽ *to subsdvibc *to 
youv -feed m *tKciv veadev - o( dKoidc- 


mm 


Fccdbu\rhc\r tkh keeps tvadk o( how 
Why subsd\ribc\rs a\rc aUcssi^ y ou ^ 
Via you\r -Peed, a^d sev-ves 
that da*t^ up'm some lia^dv 



Create a Feedburner account for your blog. You'll need a Google Account to use Feedburner 
(http://feedburner.google.com). Make sure you add the Podcast feed, not the main blog feed. 



http://thanksformutton.com/?feed=podcast 


FccdBuv-hC\r will pvorwp-t 

you 4\r the -Peed fvonx vou^ 

bio ， 
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exercise solution 



Vi 


iRctSe 

iviiOH 


Create a Feedburner account for your blog (you already 
have one if you have a Google account) 

I 七 ’s —dk diY\A easy bo 
dvca*tc a ^oo^lc addouv>*t i-f 
you dov^i alv-cady have oy>c. 


© Add the podcast feed to Feedburner. 

You might be tempted to click the “I’m a podcaster” 
button —— but don’t! That’s a whole other way of sending 
feeds to iTunes and we’ve already got that taken care of. 






1 







■http://thanksformutton.com/?feed=podcast t ^ h 

Lar-ana ■ ■ mtm ■ -an -u -mim ■ r«ia ■ ■■ ■■■ ■■■!»- ■ n ru- ■ -u ■■ ■■■ n ■ v w 3 jr wn iuti wm vi 1C vkJ U hd Lll V I lu I U d 


hTtn^jj si^rtn rrtm/rss xml: 

I sb _n i naH'i ■__■■■ 


^ I Jiiii h jiHiilnilitrl NfIKt l 1 


^ Pick a title URL. 

Here we add just one more title and 
the last part of our Feedburner URL. 


❹ 


N&Kt a ■ Make suve you make r>o*tc 

0*(* "tKis v\c^i URL- Wc 

*to make ouv -feed 
URL m 1/Vov-dPv-css. 

Burned 

That’s it. We’re now “burning” (or 
running) our feed through Feedburner. 


Welcome! Let us bum a feed for you. 


Harip A wtmv hapEwnt rwu n uta uiup cmKiMt ； 

^ f-MdAumfr wfl jppty umf pf pur must pcf^tpr la y^ir miw 
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*■ Tfty may ahC 糊 up sjum tramc iljrte fancklrfeg lind 


Gm ycur fMd « ow ims MflrHsi 


rp*diaii ^VIC- 

Thanks for Mutton 

L ■ 」 

hDp a .ijT*idi l^iuw.obfn. 1 . 

tfm 




All Fccdbuv-y>cv- -feeds s*tav-*t v/rth w h*ttp-/ /(ccds. 
-Pccdbuv-v>cv- dom. w Wlc yt *to dKoosc *tKc las 七 
pav-*t URU so fidk somc*th*m 5 sKoirt 

*tKa*t *idcv>*t'i-f'ics youv -feed easily. 


Drnnymp I 



Congirat^i Your Fi&edBumei 1 feed fe 
now live. Want to dress it up a little? 

HiKnlit In ^wr l_ ie*rd■! 

http://feeds.feedburner.com/tfm 




b AM Pkdim：rbll ITTIP imlBvnirSrtP nplmt Ifir i nc^MV 
fv tec raPQflinb 


MbkC k w & i Hmi ■ 


http://feeds.feedburner.com/tfm 
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OK, so knowing how many people 
use our feed sounds nice, but 
why is the RSS link on the 
site still the old one? How is 
anybody supposed to find and 
use the new Feedburner feed? 


Good point. 

The podcast feed from Thanks for 
Mutton still points to our old feed 
URL. We need to change this so 
visitors subscribe using the Feedburner 
link. Otherwise we can’t track our feed 
subscribers. 


http://thanksformutton.com/?feed=podcast 


r ^ 1 


和 B Idil ny! 4JUJ PuiL 






Thanks for Mytton » Feed 
Thanks for Mutton & Commei/its Feed 
Podcast: Thanks for Mutton 


P^jpp PuJj ； |J| tiki 





Thanks far Mytlon 
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fixing our feed 

Override feeds m the header of our theme 

It’s great that WordPress handles all the RSS file updates automatically, but now we have to dig 
into how it does that so we can update them to use the Feedburner URL instead. WordPress 
builds all of the RSS links automatically and places them in the <head> of your blog so that 
RSS services like Google Reader (and many others) can manage subscriptions to your content. 
We need to override the that link and place our Feedburner link in its place so that visitors 
subscribe using the new service. 



Add the new feed URL to your header.php theme file right header.php 

below the <?php wp_headQ ； ?> line. 


<?php wp_head(); ?> 

<link rel="alternate" type="application/rss+xml n title="Podcast : 
Thanks for Mutton" href="http : //feeds.feedburner.com/tfm" /> 

</head> \ 

ttcvc^s y/Kcv-c you fu 七 m youv^/ 

Fccdbuvy>cv URL 



Find podcasting - feed. php. 



/plu^ms/poddastm^/ fodtastm^- 



In the TSG Podcasting plug-in folder there will be a file called podcasting-feed.php 
podcasting-feed.php, which sends our podcasting link to 
WordPress. Open this file in your favorite text editor. 
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k 卿 Ba 料 



❿ 


Comment out a few lines. 

Find the two bolded areas below and “comment” them out by 
preceding them with two forward slashes (//). These are single-line 
comments in PHP and will keep those feeds from displaying. 


function addFeedDiscovery() { 

global $wp_rewrite; 

$podcast_url = ($wp_rewrite->using_permalinks()) ? V feed/podcast/ 

: V?feed=podcast A ; 

$podcast_url = get_option('home') . $podcast_url; 

// echo ' <link rel= 〃 alternate 〃 type= 〃 application/rss+xml 〃 
title="Podcast: ' . htmlentities(stripslashes(get_option('pod—title')), ENT— 

COMPAT, 、 'UTF-8” . href:'" . $podcast 一 url . '" 一 />' . 、 '\n "; 一一 

This is a ?W? *too- -follov/s i\\t two 

-fov>wav*d slashes yts i^ovcd by WovdPv*css. I*ts a sa-fc v/ay *to 

disable dr>y to&t v/rthou 七 ^ m you r\ttd i*t la"tcv-. 

$pod—formats = get_terms ( 'podcast_format^ ，- 'get=all 。； 

if ( is_array($pod—formats) && count($pod—formats) > 0 ) { 

foreach ($pod—formats as $pod—format) { 

if ( 'default-format' != $pod—format->slug ) { 

$podcast_format_url = ($wp_rewrite->using_ 
permalinks()) ? $podcast_url . ''?format=$pod—format->slug" : $podcast_url . 

、 &format=$pod—format->slug"; 

// echo ' <link rel= 〃 alternate 〃 

type= 〃 application/rss+xml 〃 title= 〃 Podcast: ' . htmlentities(stripslashes(get_ 

option ('pod_title A ))) . ' 、（ $pod—format->name) " . href='” . $podcast—format— 

url • / > T . ''\n"; 一 一一 

} All *t^s todt docs is display *thc same Imk y/c 
} alv-eady added *to Kcadcv-.fKf. 



o 


You usually don’t have to do this much 66 hacking . 55 

There are plenty of plug-ins that integrate Feedburner into WordPress — just not any 
good solutions for our podcasting plug-in. You’ll sometimes find there are trade-offs for 
simplicity when using WordPress and you often have to get your hands dirty with themes 
and plug-ins. If you want to learn enough to really start putting PHP to work on your WordPress site, we 
definitely recommend Head First PHP & MySQL. 





// Formats 
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nice work! 
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podcasting and syndication 



You’ve got Chapter 6 under 
your belt and now you’ve 
added podcasting, syndication ， 
and Feedburner to your tool box. 
Next up, how not to get hacked and 
backing up your Word Press site. 



BULLET POINTS 


■ Word Press can act as your central hub for 
online content distribution. 

■ Any video and audio that you want to use for 
podcasting must be stored on your web server, 
not on hosted services like Vimeo and YouTube. 

■ RSS, or Real Simple Syndication is a way for 
blogs for syndicate content to other services on 
the Web. 

■ Word Press publishes a standard RSS feed for 
you blog by default. 


■ Use a podcasting plug-in like TSG Podcasting 
to make embedding and syndicating podcast 
content easier. 

■ Feedburner can help you manage your feeds 
and keep track of how many subscribers your 
blog and podcast have. 
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7 securing Wordpress 

命 ♦ 

^Locking things down ♦ 



Not everyone on the Internet is nice. 


It’s a fact of modern life on the Internet: there are people who spend their time trying to 
break into, or hack, other people’s websites. Some do it just for the thrill, others to cause 
chaos, and some are simply after sensitive information like credit card numbers, social 
security numbers, and other personal information. Now, you’ll learn how to make your 
WordPress site more secure, with unique usernames, strong passwords, and more. 
You’ll also kick off automatic backups of all your WordPress files so you can restore 
your site if it ever does get hacked, or goes down for other reasons. 


this is a new chapter 239 



CSI WordPress 

Something's wot right here... 

Just as Thanks for Mutton was starting to pick up steam, all the posts and pages are gone —— 
including the podcasts. Luckily, we still have the video files in our Media Gallery, but the 
WordPress posts all show page not found errors. 




Thsnks for Mutton 




Not Fourvl 




■ Ebvnd k 


II- 






Do you know how much 
bacon I had to eat to 
research those posts!? 


*'ii 4 lp 4 | | f 




The home should be 
showing d lis-t o( pos-ts now 
dll wc have is a “(Vo 七 FouK>d w 

anda scav-dh bo 乂 . 



TKc w No*t PouW fa^c, also 
ky>ovm as a 千 0 千 error ( 七 he todt 
(ora missmg pay) is displayed 
y/Kev> 1/VovdPvcss da^*t -f md 
a usev- is vc^ucstm^. 




li’s ⑽七 jus 七七 he home dll 
七 he posi airdhivc pages dve 30 於 
•too. Looks like all -the posts have 
bee 灼 deleted -Pv-om -the si 七 e/ 







securing WordPress 


/ Edit Posts 

±L _ 

ah m 

No Posts found. 


Add New ' I 




The fos-t page *m -the adm'm sedtio^ 
shows ho-thmj-how did -these Posts aci 

deleted? 






_ 




One of the easiest ways to secure your 
WordPress blog or site is to use strong 
passwords — specifically, passwords that can’t 
easily be guessed and that don’t show up in 
dictionaries. Think about other ways someone 
might try to break into your site and cause 
damage. Is creating a secure password the 
only thing you can do? What about servers, 
commenters, and spam? 
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to catch a thief 


Yo uVg been hacked 

Believe it or not, there’s a good chance that your blog or website has been on the receiving 
end of some type of malicious behavior. These attacks are occasionally undertaken by people 
themselves (or hackers), but they are mostly performed by “bots” (or robots, which are really just 
computer programs written by hackers) that scan sites for vulnerabilities. It sounds bad, but the 
good news is they aren’t usually successful if you have a few safeguards in place. Let’s take a 
look the most common attacks and then we’ll see what we can do prevent them. 



Server attacks 


Prute force attacks 

These types of attacks are very common and consist simply of a person or 
a computer program trying to access your admin dashboard by repeatedly 
trying different passwords until the correct one is found. This becomes 
even easier if you still use the default “admin” username and have a weak 
password that’s easily guessed. Best protection: Change your username 
to something other than “admin” when you install WordPress, and use 
strong, secure passwords. 

4*ov*£.c 3"t*toi£.ks be used 

on a^y sys-tcrw wiih a and \ I *1 1 

一 passy/ov-d—this mdludes youv web ) ■ —— 

sc\rvc\r av\d My£6^L da-tabase- t 


Hackers don’t need to gain access to your WordPress dashboard to cause 
problems either. If they can get access to the servers that your site is hosted 
on they can change information through the database or just bring your ' — 
entire site down altogether. Best protection: Use reputable, reliable 
hosting and make sure your account passwords are strong and secure. Use 
SFTP to transfer files between your local computer and web server. 

is a scduv*c -fovm of FTP v/KidK c^dv-yp'ts 

" dommu^'idai'ioi^s bc*tv/CCr\ SCWCV. 
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Penial of Service (how dare they!) 

Another way web hooligans can try and mess with your site is with a denial 
of service (or DoS) attack. DoS attacks work by flooding a web server with 
requests (also typically via a computer program) until it can no longer 
handle the load and crashes. While in most cases your data will be safe 
(though it’s not guaranteed), your site will be inaccessible to the public 
until you can find and block the offending traffic. Best protection: 
Firewalls can help block traffic, but not until after you have identified the 
source of the DoS. We’re not going to cover firewalls in any detail here, 
but your hosting provider should be able to help you get those set up too. 
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Hackers Exposed 

This week’s interview: 

We interview a hacker serving 
time for credit card theft 


Head First ： Welcome Mr. Hacker, thanks so much 
for coming out. 

Hacker ： Yeah, thanks. Real quick — just wanted 
to let you know that there are more than just those 
three ways to hack a website. 

Head First ： Well those are just some of the more 
popular ways — we could have a whole a Head First 
book on website security. [Ed note: Interesting..^] 
Anyway, tell us how you got into hacking in the first 
place. 

Hacker: Well, it started out as just a hobby. I’d 
break into websites just by trying default usernames 
and passwords. You’d be surprised how many people 
leave their websites wide open for attack like that. It 
was too easy, I’d hardly even call what I was doing 
hacking it was more like guessing. So easy my 2 year-old 
nephew could do it... 

Head First ：： Wow, that simple, huh? What did you 
do to the site once you broke in? 

Hacker ： Oh, usually I’d just delete some things, 
maybe swap out an image for one that’s —— how do I 
say this —— not as “family friendly?” 

Head First ： So then what happened? Did you get 
bored with that? 

Hacker ： It was just too easy; I needed more of a 
challenge so I started trying to just break right into 
servers. There are lots of folks out there that manage 
their own servers and don’t know what they’re doing. 
Again, most of the time I could just guess their 
usernames and passwords. Once I was into the server 
I had full control over every aspect of the site —— I 
could just turn it all off or find where they store 
credit card numbers... 

Head First ： Again, bad passwords? This is all 
hacking is, right? It’s just guessing usernames and 


passwords. I’ve got to say, I don’t know what’s more 
shocking: how easy this seems to be or how bad we 
are at choosing secure passwords. 

Hacker ： Don’t get me wrong, it can be a lot more 
difficult then that —— but why try the hard stuff if 
there’s a good chance a few guesses will work. Most 
of my, ahem, colleagues even have some software now 
that will try almost every word in the dictionary as a 
password. It’s all automated too; I just sit back and 
wait for it to find a match. 

Head First ： You said there was some hard stuff? 
Can you give me an example? 

Hacker ： Well, there is a technique called Cross¬ 
site scripting, or XSS. These attacks require us to 
exploit a flaw in a website by inserting bad code into 
a website URL. If the website is not checking its data 
and input correctly, we could change records in the 
database or even remove data altogether. 

Head First: Why is this more difficult? 

Hacker ： You just need to spend a little more time 
learning about the site and checking and testing 
flaws. It’s just not as easy as trying passwords. The 
thing is though, once we know what type of site 
you’re using (WordPress, Drupal, Joomla, etc.) It’s 
easier to target the security holes. 

Head First ： This is just fascinating stuff. Any final 
words for our readers? Tips on making sites more 
secure? 

Hacker ： Use strong passwords everywhere. Make 
the hackers try the hard stuff; they’ll usually just 
move on to the next easy target —— there are plenty of 
them out there. 

Head First ： Great advice; always a pleasure having 
you in for a chat. Good luck with all those license 
plates... 
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stay updated 


Keep your WordPrcss installation and plug-ms up-to-date 

Before you consider any other ways to secure your WordPress site, the first thing you need to do 
is make sure that your WordPress installation and plug-ins are all current. A large percentage of 
attacks on WordPress sites happen to blogs that are using out-of-date software. When WordPress 
finds security flaws and bugs, they are patched with updates regularly — don’t ignore the pleas to 
update your software. The same logic applies to any plug-ins you have installed. 


一 - The update i-tcirw y/ill show how 
upda-tes avc available (or WovdPvcss. 
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..Rnf ， r1 Alii 

Updiie PluglfH 


园 Appearance 
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also see d ㈣- m update Co^i m mam 巧 - m 
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244 Chapter 7 




securing WordPress 


Avoid file uploads with automatic updates 


Depending on your WordPress setup and your server configuration, you might be able 
to use the WordPress automatic updater to install updates. Just like we saw earlier with 
uploading images and video, the updater needs to be able to write to the file system. If it’s 
not able to, it will ask for FTP connection information. WordPress recommends that you not 
use this method and instead change the file permissions on your web server. 



There is a new version of WordPress available for update 

You are using a development version of WordPress, You can update to the la 
and install it manuaily: 

Update Autam^lically Download nightly build 


Pcpcr>d*m5 oy\ youv 
WovdPvcss vcv*s*ioy> you y/'ill 
sec au*fcoma*t'id update 
button d\oY\(^ 3 h'l^ivtlY 

build bu*t*boir> (i-f you 3 
development VCVS*ioy>). 




Update Plugins 


□ Select All 



一 Akismet 

You are running version 2 , 2 . 7 . Update to 2 . 2 . 9 , 

Compatibility witli Word Press 3.0: 100 % (according to its author) 

- Select All 


Au-to-updai'mj plug-*ms C^y\ 

^Iso be mi-tiaied -Pirorw ihc 
updaic paje. 

■the spam plug—hds a new 
vcv-sio^ available- 



Don’t use the Connection 
Information update 
method. 

If the automatic updater can’t 
access the file system when 
attempting to update, it will ask you for FTP 
information and attempt to connect that way. 
According to WordPress, this won’t work 
and you’ll need update WordPress manually. 
Don’t panic, we’re about to get to that … 


；'GfjnnechVfn 
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l-P you see 七 his you II Y\tcd io 

updaic 1/Vbv-dPv-css manual ly. 
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back it up 


Use FTP to update WordPrcss if automatic updates don't work 

Updating WordPress is pretty easy，even if you aren’t using automatic updates. All we need to 
do is download the newest version of the WordPress system (or a specific plug-in that needs 
updating), and copy the new files up to the web server. 



Download most current WordPress and plug-in files. 

For both plug-ins and WordPress itself, you need to download the updated files 
to your local computer before you can do anything else. You’ll be able to find 
their most curent versions on their respective websites. 



Dwriiload WordRrM* 




WovdPvcss Akismc-t have 
download legations. These downloads av-e 
usually 仏你 pwsed iivto a ZIP -Pile -tha-t will 
t\ttA -to be “impadked” bc-Pov-c you use 
■them. 
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Back up your original files. 


To be sa-fc, dopy youv- c^tivc 
WovdPvcss *ms*talla*t'ior\ doy/y> *to 


Before you install the new files, back up what you’ve got right 
now. Backing up WordPress and plug-ins before we upgrade 
will ensure that we can “undo” the changes if something 


youv loddl domfu*tcv. Siash i*t m a 
easily vcdoy>^*i2^blc -foldev- *m dasc 
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Upload the new files to WordPress. 

When updating plug-ins, you can replace the entire folder. For example, 
Akismet is installed in / wp-content/plugins/akismet. When we upgrade, we can 
just overwrite the / akismet folder. For a full WordPress system update, you want 
to replace every file and folder except your wp-config.php and .htaccess files 
and the / wp-content directory (this is where all of our uploaded files, themes, 
and plug-ins live — we want to keep those the same). 
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ffddinc.html 





wo 
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W\\tY\ dofymg -files, select 
cvcv-yth'mg bu*t 七 he do^-f i^uvatio^ 
-pile dv>d Wc y/airrt *to 
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index.php 
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二 podcasting 





Do〆 七 delete or v-cpladc you\f / y/f - do 灼七⑼七 d*i\TCd*to\ry 
unless you y/ay>*t *to lose dll o-f youv plu^-ms ar\d *ti^mcs 
You CdiY\ also leave \wp-doy>-f*i^fKp aloy>c *to avoid 1 ^\/叫 
-to v-c-tyfc all of youv- database *m-fov-matioy>. 



Be extra careful with /wp- 
content if you have custom 
themes. 

If you accidently replace /wp-content 
and all you have is downloaded 
plug-ins and themes-those can be replaced. 

But if you made your own theme, it might not 
be as easy. Exercise caution when you update 
WordPress and mind your custom files. 
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safety first 

Secure users make secure websites 

Now that your WordPress installation and plug-ins are up-to-date, you can focus your attention 
on the next most vulnerable aspect of your WordPress site: your users. Users need to gain 
access to WordPress for many different functions, most of which involve modifying the system 
(adding a post, changing an email address, moderating a comment). Because of this, you need 
to make sure everyone is using secure usernames and passwords and that they only have access 
to the functions they need (see previous chapters on user roles). 


Make sure usernames are unique and never use the “admin” default for 
administration accounts. If you’re really paranoid, don’t use the same 
username you use on other web applications or social networking sites. 

Always use strong passwords. You should strive to get the WordPress 
password meter into the green and avoid dictionary words whenever 
possible. Weak passwords can become your biggest security 
headache. 


I iic mam f co^c/n 


thii bMnk. 


If iWmM irkt J; Jlni^ 


AQMfi, 




Niflt TfJf pjtssmtfd bt dl 

: fus it MuW 


Be smart about user roles. Only give users as much access as they 
require to do their job. Keep access to administrative user accounts 
to one or two people and limit the number of users that can publish 
content or modify the live site. 


Users 姐如 


Admmislrator (1 I Editar • 1! ! Cuntrlhutor (I| 



AH 




this! 
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hoy/ *to y/v*rtc stvoy^ passy/ovds. 



T~ll3^ks -Pov* 七 OUV* 
usc\rs arc spread oui across -the 
^olcs io lirwii who C^y\ publish 
"to -the blog. 


The admin user wasn’t changed when Thanks for Mutton was first 
created. Log in to the WordPress dashboard and change the “admin’ 
username in the user settings. 
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iH Profile 


I 七 looks like uscv*y>amc -f ield is disabled m *0^ 
pvo-Pilc Looks like v/C d3y> *t ouv 

usc\nr>amc -rv-om KcvC- 


Kcvc- 


Name 


Usern^nn^ 


admin 




First Name 


Last Name 


Nickfiame tr&^uir&d) 


admin 


What gives? I can’t 
edit the username. 


4 Ui(iin 


Aulliar^ & Users 
Add New 

Your Profile 


The piro^ilc pajc is 七 he ov\\y 
pbdc m "the ddmm ddshbodv~d 
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扣 d i*t let us 

ouv usev-^dme - 




i 


Where are your username and password 
actually stored? Could that help you figure out 
another way to change your admin username? 
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exercise solution 


Edit your database to change usernames 


Once you’ve created a user in WordPress —— any user, not just the admin — you can’t change their 
username from the dashboard any longer. You can change how a user’s First and Last names appear 
on the live site, but the username they log into the site with isn’t editable. In order to modify the 
username after it has been created, we need to edit our database and user table directly. 


I*P youv usmj Acedia Temple, you -to phpA/lyAdUm 

by oy\ -the adrwm bu*tton nwt "to youv- dd'tdbdse- 


MySQL 

fldmin 


ijll Delete 

!l 



1 


l/Ve "took a 、uidk peck at 
p^f/WyAdrwih ih Chapter / 
as a way -to dhcdk ouv- hew 




You don’t have to be a database or MySQL ninja to do this. 

Tools like phpMyAdmin help you work with databases using familiar interfaces that look a 
lot like web forms. You’re able to access your database, look at all your tables (more on that 
in a second), and change things easily. We’ll take a quick look at how a database is set up in 
general before diving in and changing our admin username. 
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databases arc made up of tables 


So all along we’ve been referring to the web server that hosts WordPress, but in reality, the computer that runs the 
web server also runs what we call a database server. That’s where your MySQL database lives (or multiple databases, 
in many cases). You communicate with a database server in a language it can understand, which in this case is SQL. 
A database server typically runs alongside a web server on the same server computer, working together in concert 
reading and writing data, and delivering web pages. 


Client browser 


丁 he web scv-vcv- pv-o^csscs web 

fajc v-uhs PUP Serv er com puter 

扣 d \rctu\r^s HTML ^ 



TV^C database s^rw 
v-eadis dr\d v/v-*i*tcs daia 


MySQL databases are organized into tables, which store information as rows 
and columns of related data. Most web applications use one or more tables 
inside a single database, sort of like different file folders within a file cabinet. 


MySQL database 



stoved as ov^ a V^avd 
W 七 •* 七 Aotsr：i 成 ⑽ a 吻 V^vc to 

be. 




Gee| B 形 


For Mac users, there’s a better solution for modifying MySQL. Sequel Pro (http://sequelpro. 
com) is an open source database management tool that allows you to modify and administer 
local and remote databases. It’s a must-have for serious site owners. 
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phpmyAdmin 


On most web hosts, the easiest way to change data in your database is to use the MySQL 
administration tool that comes with your hosting. For most of us that’s going to be 
phpMyAdmin —— a browser-based tool that allows use to see a visual representation of our 
database and it’s tables, and then make modifications accordingly. 


o Log in to phpMyAdmin. 

Before we can do anything to our database, we need to log in to phpMy Admin using our 
database username and password. 


php"- ； ■ : • - rT 1 

时 4 w Admin 


巾 

■ 匆 iir i—JifL 




I >S 


Phn 




LL *rui Ln Hi 



Youv Kos*t*m^ ^ay 

Kave fvodcduvcs -fov 

l-f youVc 

y>o*t oy\ yVIedia Temple, dKcdk 

-tKc'iV dodumCir>*tatioy> bc-foVC 

-Povv/av-d- 



Back up your database. 

This database holds all the content for our entire site —— it’s important. As we saw earlier, the 
best way to make sure important files stay safe is to back them up, and databases are no 
exception. We’ll cover this in more detail later in the chapter. 

Select your database from the main 
dropdown in the left sidebar. 

At the top of the window, click the tab that 
says “Export.” You’ll then see a list of all the 
tables in your database in the left column. 

Make sure all the tables are selected and that 
both “data” and “structure” are checked 
for export. Then click “Go” and save the 
exported file to your computer for safe 
keeping. We can re-import this later if need 
be, and we’ll have our database restored to 
how it was before the backup. 
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Show the wp—users table. 

Once you have a backup safely stowed on your local machine, go back to the 


“Structure” tab, open up the wp_users table and find the admin user. The user 
is one row in the wp_users table. 
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Update the admin username. 

Clicking the pencil icon will take you to an edit form for that table row. Change the user_ 
login field to something other than “admin” and click Go. We now should be able to log 
in to WordPress using our new username. Remember, pick a unique username that isn’t in 
the dictionary and would be very difficult to just guess! 
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a very fine username 



Uohu Aa+3 如 usc^a^c d.d^t alW a^y o-f 
Misplav r^amc fubkly W scttmjs. T\\tst the sa^c 

扣 dl w be ^a^jed ^v-om wVtWm the dasKboavd. 


t^ereiare no o 

Dumb Questi9ns 


Q/ Why can’t you just change the 
username from the dashboard? 

That’s a great question. This 
was a design decision by WordPress 
programmers and that functionality never 
made it to the dashboard. Our guess is it 
was done for security and administrative 
purposes. 


Can’t hackers just guess my 
new username too? How is this more 
secure? 

Yes, hackers could just guess your 
username but that’s twice as hard as just 
guessing only your password. By adding 
another variable (the unknown username) 
brute force attacks become less effective. 


Are there other “insecure” 
usernames like admin? 

The only reason "admin" is insecure 
on WordPress is that it’s well known as 
the default username. Other systems may 
have different known defaults and pose 
different security risks to the site owner. 
Best case is to never use the default. 
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Add more security to WordPress by protecting wp-admm 


There is one final thing we can do to make the WordPress dashboard and all your user 
accounts a little more secure. As you might remember, the / wp-admin directory is actually 
accessible in a browser window if someone knows how to navigate to it. It’s another well- 
known vulnerability for WordPress sites. By adding a second layer of authentication to the 
/ wp-admin directory, we can force users to enter two sets of credentials to gain access to 
the site. That alone should ward off many potential hackers. 
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your credentials, please 


Create a new authcwticatiow realm 

The easiest way to create a new authentication realm (also known as HTTP Basic 
Authentication) on your web server is to use your hosting panel. Most hosts —— Media Temple 
included —— allow you to create these from within your account settings. 


③ 


Log in to your web host and find the password protect directory 
option. 

This should be located in your primary domain settings. 




Add a user for the new realm. 

We need to create a new “user” for our realm. This is really just the username/ 
password combination that people will use to log in to the realm. 
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dmin) that will be protected by the 
will also be protected 

















hackers be gone 




Tqst DriVq 


一 


•CCFIlW^ 


Hu/^3 ks UWn_ » 4^4 I 


】 


W -I JlkB 
.l.«d 


Ktju e^i_ IW ■ 


p^it ■ l B lMliXlffTBJT10r g dC£«l ff 
PviJ<" ThiLn^ I Tst ^dww 


]o 


Cnri Lnin 1) 

r ~i r i I ■** 




l-P you ^aviga-tc -to /wp-adUm 
OY\ you\r blogs URL, you should 
be pv-csc^icd wi-th d dv-op down 

au'theKrtida'tio 灼 bo/, ("this mdy look 
slijlvtly di-ffcv-c^-t depe^di^ ov\ 
youv- bv-owsc\r). 


Oy>dc *tKcy pass *tKc HTTP 

au-tKc^tidatio^, uscvs dar> 
dor>*t'muc 'm *to *tKc 

一 md'm 1/VovdPvcss dashboavd- 



6 ee} Bits 


You don’t need to use your hosting panel to add an HTTP 
authentication realm. In fact, you can add the all necessary 
info right to your .htaccess file. For more information on 
creating your own authentication realms, check out the 
Apache manual pages: http://httpd.apache.Org/docs/2.2/ 
howto/auth.html. 


〈Location / wp-admin> 

AuthType basic 
AuthName "TFM Admin Panel" 
AuthUserFile / passwds 
Require valid-user 
</Location> 
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Security by obscurity 

WordPress sometimes gets a bad rap for security — some of it founded in actual vulnerabilities, 
but most of it is based on exaggeration and/or people not doing the work to secure their 
WordPress sites properly. Security is not something most web frameworks are good at, especially 
not without some forethought from programmers and site administrators. Websites also 
become more vulnerable when the attacker knows what type of system the site is running on 
and can try specific hacks for that platform. Basically, if a hacker knows we’re using WordPress, 
he knows where to start breaking in. What’s the best way around this? Make WordPress act like 
something other than WordPress. 



Identify parts of the (hacked) Thanks for Mutton site that might identify it as a WordPress blog. 
Hint: don’t be afraid to check out the “view source” option for your site in a web browser to see if 
there is anything under the hood that might identify TFM as WordPress-powered. 


a 








I 


Thanks for Muttan 



Not Fowid 

bvl l&rsju^r tuu ul 4 Lrr tkrunL kve rimK wdL Ibr^. 




pJ tm 恐 
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exercise solution 



tjceRciSe 
SoLyiiOH 


Identify parts of the (hacked) Thanks for Mutton site that might identify it as a WordPress blog. 
Hint: don’t be afraid to check out the “view source” option for your site in a web browser to see if 
there is anything under the hood that might identify TFM as WordPress-powered. 


|-f pvc*t*ty enabled ； 

URL of ouv s'i*tc da 灼 ^ivc 
av/ay 七 he v/cVc us'm^ n 

WovdPvcss *to poy/cv- 七 he j 


Us*mj -the dc-Pauli Wov-dPv-css iheme is also a 
v/c rwiglvt bc> well，Wov*dPv*css. 
1/VeYe Y\oi jomj io 七 hat vijh-t v\o^, bui 

we 匕扣 still make rt a bit less obvious. 


十 j M 批 : _ ^hjriiJteTr^ ▼ m ■ s! 




Thanks for MuttOfi 


鱗 


401 RhMMf 

“ ■雪 bcM 


The Pov/c\rcd by WovdPvcss 
logo is pretty mudh a dead 
giveaway -thai wcVc us'm^ 
Wov-dPv-css. 


Vhr jms 


ild ho? hr FVriupi Mijlrfcin^ -nd hrl^. 


|-f you look a 七 *tKc pay 
souvdc you da 灼 see o*thcv 

mc*ta *tay *tKa*t ^ay also 

^ivc us a>way- 


<link rel= n EditURI n type= n application/rsd+xml" title="RSD" href="http :// 
thanksformutton.com/xmlrpc.php?rsd" / > 

<link rel= M wlwmanifest" type="application/wlwmanifest+xml" href="http :// 
thanksformutton.com/wp-includes/wlwmanifest.xml" / > 

<link rel = 1 index' title='Thanks for Mutton * href = 1 http :// thanksformutton.com * / > 

<meta name="generator" content= n WordPress 3 . 0 -betal n /> 
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You caw learn a lot about a site by looking at its head 

You can learn a lot about a site and how it works by viewing the source in a browser and 
checking out the link and meta tags in the <head> section of the HTML. 



WcVc lookm^ a*t bvoy/scv souvdc o-f TF*A1 
home bu*t -the todt 七 ha 七 ^traits *tK*is HTML 
is lodaicd *m Kcadcv-.pKp -tKcmc -f ile so you dould 
look *tKcvc *ms*tcad. 



<link rel= n EditURI ，， type="application/rsd+xml" title="RSD M href="http :// 
thanksformutton•com/xmlrpc.php?rsd" / > 

<link rel= M wlwmanifest" type="application/wlwmanifest+xml" href="http :// 
thanksformutton.com/wp-includes/wlwmanifest.xml" / > 

clink rel = 1 index' title='Thanks for Muttori sV ^ref = 1 http :// thanksformutton.com' / > 

<meta name="generator" content:"WordPress 3.0-betal^\/> 



The mos 七 obvious t\\At >w«Vc \ru1rmm3 
1/Vov-dPv-css is i\\t HTML iao^ 七 ha 七 tells, *m 
Jfad-t, -tKa-t V/C art us*m5 WorA?rtss ytrs\or\ 
Z.O Beta I. ThaVs like Icav'm^ -the key *to 
youv Kouse uy>dcv- -fv-oy>*t doovmat-. 


you d lihk ov* -file 七 
i-t's a jood bc-t -tha-t 
IA/ov-dPv-css is 'mvolved- 


r ^Sharpen your pencil 




Let’s get rid of the most obvious WordPress give-away, the meta 
tag "generator.” Examine header.php in your template directory to 
see if you can remove it from the page. 
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Sharpen your pencil 

Solution 


Let’s get rid of the most obvious WordPress giveaway, the meta 
tag "generator.” Examine header.php in your template directory to 
see if you can remove it from the page. 


<?php 

/ -k-k 

* The Header for our theme. 

■k 

V 

?> 

<!DOCTYPE html> 

<html <?php language—attributes () ; ?» 

<head> 

<meta charset=’’<?php bloginfo ( 'charset A ) ; ?>’’ / > 


Remember i\\t -f lic 

doy>*ta*ms *tKc la*tcs -fov {Me Kcad 
Jc ouv- ttTMU >wKc\rc i\\ai 

is located. 


<link rel=’’prof ile’’ href=’’http ://gmpg • org/xfn/11’’ / > 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 media= 〃 all 〃 href=〃<?php bloginfo ( 
'stylesheet—url' ) ; ?>’’ /> 

<?php if ( is_singular() ) wp_enqueue_script( 、 comment-reply' ); ?> 

<link rel= 〃 pingback 〃 href=〃<?php bloginfo( 'pingback url ' ); ?>〃 / > 



<?php wp head(); ?> 


<link rel= 〃 alternate 〃 type= 〃 application/rss+xml 〃 title= 〃 Podcast: Thanks fo: 
Mutton" href=’’http ://feeds . feedburner • com/mmmmmutton’’ / > 



V -- - 

V 1 七 looks like dll -those rweia 如 d Imk 

"tajs by a PUP 

called wp_J^dO. 

■ - ， 

header.php 


We’re not going to be able to turn off ilie generator 
tag from Headerfile. We’ll need to find tke 
file >^iere tke PIJP functions are coded instead... 
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Open the functions.php theme file. 

Scroll all the way to the bottom (especially if you’re using the twentyten theme). If you don’t have 
a functions.php file you can create one in the main theme directory. 


* Removes the default styles that are packaged with the Recent 
Comments widget. 


function twentyten_remove_recent_comments_style() { 

global $wp—widget—factory; 

remove—action( 'wp—head', array( $wp_widget_factory- 
>widgets['WP_Widget_Recent_Comments f ], 'recent—comments—style ')), 

} 

add action ( 'widgets init', 'twentyten remove recent comments style 



functions.php 


Add a remove action call to disable the generator tag. 

WordPress allows us to add and remove actions within the system, 
including the wp_head(). We can use the remove_action() function to 
disable the meta generator tag. 


function twentyten_remove_recent_comments_style() { 

global $wp—widget—factory; 

remove—action( 'wp—head', array( $wp_widget_factory- 
>widgets['WP Widget Recent Comments'], 'recent comments style')); 


add action ( 'widgets ±n±t r , 'twentyten remove recent comments style'); 


remove action('wp head', 、wp generator A ); 




This Will \rCmovc i\\t sm^lc bu*t leave 

七 he v*cs*t TV>is y/ill ⑶ suve 七七 

oi\\tr stylus, like *tKc poddast, stay 



functions.php 
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thafs better 



BULLET POINTS 


■ Good security starts with good passwords. 

■ A strong password is a word or phrase that is 
longer than eight characters, contains some 
special symbols, and isn’t a standalone dictionary 
word. 

■ Always keep WordPress and any installed plug-ins 
up-to-date so your software reflects the latest 
security updates. 


■ Avoid using the default WordPress “admin” 
username. Make sure you change it during the 
initial install of WordPress or use a database 
manager like phpMyAdmin or Sequel Pro to 
change it after the fact. 

■ Use security by obscurity to keep would-be 
hackers from attempting WordPress-specific 
attacks on your site. 


I feel better already. You know, 
given that this could happen anytime— 
we really should have a backup plan for 
the site. It would have been nice to 
just replace the posts that got deleted. 


o 
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Pack up early, back up often 

Backups are probably the single most important security measure you can take for your site. In 
the rare event that your site is irreversibly hacked or suffers a server crash, a backup may be the 
only recovery option. They are often overlooked by new site owners who are just concerned 
with getting their blogs off the ground and are not worrying about replacing a broken database 
or files that have gone missing. Everyone from the novice blogger to the professional webmaster 
should be backing up all important data and files regularly, and to a location that’s not on the 
main web server. 





WordPress 


By up youv- ^VovdPv-cs 

divcd-tovy, you cav\ make suvc 七 ha 七 
為 11 youv- pluj-ms, ihcrwcs, 

scttmjs av-c pv-cscv-vcd- 


wp-admin 


l-P you da" 七 ba 匕 k “p 
cvcv-yihmj, make suv-c you 
at least jc-t /wf-dohlch*t 

wp- 匕 oivfitvphp. r. u 

wp-config.phf 


七 hou 七 a daidbase badkuf like i\\c ov\t >wc 
did a -fow \>d^es badk, you dould po-tc^tially 
lose all *tKc toY\itr\i or\ youv si*td you 

*to be able *to vcpladc deleted posts ov 
pays 一 database backups av-c a must 


You dould also badk up cvciry-tKm^ 
oy\{p ar\ t%icrY\a\ Kav-d dv-Wc, >wK*idK 
•is a good idea bo do (or cvciry-tKm^ 
oy> youv* ovm domfu'tcv* air^。 …… 


thanksformutton—db 


your computer 



If you didn’t do this earlier when we covered installing WordPress updates manually, then log in 
to your site using your FTP client and copy your main WordPress directory down to your local 
computer. 
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exercise solution 



If you didn’t do this earlier when we covered installing WordPress updates manually, then log in 
w to your site using your FTP client and copy your main WordPress directory down to your local 

tffiRClSe computer. 

§OLvtlOH 


⑧ Login to your web server using FTP. 

One you’re on the server, navigate to the main WordPress installation directory. 

I Wse "the same £redeivtials as 

I tc-Povc v/c v/c\rc 




ippnl 


二， 1 

T 1« 1 F** 

■P Lj 


■w i 

mm'mf 

■ 



We ^av\i b> badk uf i\\t ⑶七 ••代 
WovdPvcss d*iv-cd*fcov-y, so -f md 
*tKc loda*tioir> o( mam mstall 
(I 七 should be jus 七 /l/Vo\rdP\rcss ov 


❺ Download the entire WordPress installation to your local computer. 

Copy your WordPress installation to your desktop by dragging the directory that contains all your 
WordPress files from your FTP client to your computer’s desktop or another location on your computer. 
This will capture your entire WordPress installation, including any themes, plug-ins, or special settings 
you’ve made. 


1 




P~I 

L — J 


public—html 


i - 

'■ 1 ■ 1 . 1 —:— 


public 




oy\ hoy/ m 扣 y uploads, 
ay>d *tKcmcs you Kavc, 
-tK'is doy/y>lodd dould take 3 bi*t 
time. Be pati ⑶七一 *tiVis is a 朽 
*imporbav>*t s*tcf. 
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This is your backup solution? 
I have to manually do this 
every time?! Now I see why 
no one ever backs up their 
blogs. 


Use plug-ms for remote, automated backups 

Although downloading files manually is a safe, simple way of backing up your 
files, it can be come cumbersome as your site gets larger and you begin to require 
more frequent backups. You also have to remember to do it frequently! The best 
way to manage WordPress backups is with a plug-in. Just as they can be useful for 
functionality on our blog, plug-ins can also help us manage backups by automatically 
copying site and database files to a remote storage location. 

We avc *to use *tV>c 你 a 七 k 

l/Vov-dPv-css Badkup *to -take dav-c o( 

OUV au'tomd'bed badkufs. You dovmload 
a 灼 d mstall *tK*is -fv-om ： : / / 

WbvdPv"Css.ov^/ plu^ms/du*to 你 - 

automatic-WordPress-backup ^dP^badkuf/. 




Backup schedule: Daily i 

Parts of your blog to back up 
^ Config file and htaccess 
gf Database dump 
(Vf Themes folder 
Plugins folder 
封 Uploaded content 

(Vf Delete backups oldeir than one month 
Keep a monthlv backup for one year 
□ Keep manual backups forever 



丁 his plug — ih will take dav-c 
cvcvylhihg wc heed ih ic^s 
backup. H will cvch ba^k up ouv* 
AlyS^L doi'tcibasc so wc do^-i 
have a ，七 “ the latest 

Th^hks -po\r Alut^toh missih^ 
^Ohtch-t issue. 


Save Changes Save Changes and Backup Now 
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Pow't store backups ow your web server 


One way for your site to go “down” is for your hosted web server to fail. If you have your 
backups stored there then, well...that won’t help you very much. Once of the best features 
of the Automatic WordPress Backup (AWB) plug-in is that it stores your backups on 
Amazon’s Simple Storage Service. At its basic level, Amazon Simple Storage (or S3) is a 
giant hard drive that’s distributed across thousands of servers all over the world. You can 
put as much data on the service as you wish and you only pay for the storage and transfer 
that you use. 

Amazon S 彡 


In order for our Automatic WordPress Backup plug-in to work, we need to have 
Amazon S3 configured. Think of S3 as just another web server with FTP access —— 



you can read and write files just like you do when you install or backup WordPress. 

/\mdzjoy> ddlls *thc*iv -foldcv-s w budkc*b 

Kavc *to sti up a*t least ome budkc*t ■ 

tell [ill tell 阁墓 〆 一 = 


A^azjor) Kas a *tor> of sc\rvc\rs 七七 *tKcy use b> s*tov-C 
all youv daia. TKcy dall *tWs v-cduy>dar>dY—i-f or\e (or 
move) SCV"VCV"S •fails, -tKcvc s still 

scv-vcv-s available io keep youv s 七 ud 


6ee| - 

If you’ve heard people talking about "the cloud” this is what they’re referring to: shared 
but distributed resources, like software, server space, and even data are provided to 
computers and other devices "on demand.” Think of it like the electricity grid, where 
power is diverted/moved around based on where it is currently needed most. 


268 Chapter 7 






Connect automated backups to Amazon S? 


securing WordPress 



Bc-fovc you move -Pov-wav-d wi-th 
Al/VB v/c need "to provide i-t wiih ouv 
/Wazo 灼 a^dcss aJ scdv-ci key. This is 
like a usemdme and ^assy/ov-d -Pov ouv* 
S3 a 匕匕 oun 七 . 


Restoring your backups 

Restoring files is as easy as pulling down your backups from 
S3 (some FTP clients, like Transmit, will allow you to connect 
directly to S3). The database, on the other hand, will take a bit 
more work. Thankfully you’re already somewhat familiar with 
the phpMyAdmin interface, which is what we’ll use to get our 
data back on Thanks for Mutton. Let’s get that going... 
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you’re restored! 


Import a backed - up database usmg phpMyAdmm 

In the case of Thanks For Mutton, all would not be lost if we’d just 
backed up our database. To finish the chapter, let’s say we did have 
that handy backup stored on S3, and now we just need to get it 
back onto our database server. We can do this using phpMyAdmin’s 
import feature. 




2010-06-07-1519.zip 


TV>C md'rn bddkuf> domes *m d smftlc Z-IP 
1/Ve y>ccd bo doublc-dlidk 七七 f ile *to *to 七 he 
d*iv-cd*tov-y Jc backups uy>dc\rv>ca*th. TKcyVc all 
labeled by *thc da*tc *tKcy weve dvca*tcd- ^ 々 



o 

❺ 

o 


Log in to phpMyAdmin. 

Just like you did when you we’re backing up the database earlier in the 
chapter... 

Select the Thanks for Mutton database. 

We don’t want to import this to the wrong table so make sure you are 
replacing the right one. 

Select the import tab and upload your SQL file. 

The SQL files contains the structure and data from our database and 
will restore our site to the state it was when the backup was taken. 
Once this import is finished, we should see the original Thanks for 


2010-06-07-1519 



l/Ve t\ttd {jo -fmd -the S6JL -Pile, as 
"this is -the -fov ouv 


Mutton site. 

0r\tt youv bddkuf> is ves-fcoved, *tKc s*i*tc should be 
jus 七 like I 七 >Mds bc-Pov-c you lost 
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Your WordPress Toolbox 


You’ve got Chapter 7 under 
your belt and now you’ve 
added security and backups to 
your tool box. Next up, making your 
WordPress site run super fast! 


BULLET POINTS 


Unfortunately, not everyone (or everything) 
on the Web has good intentions. Although it’s 
rare for sites to be completely taken down by 
“hackers,” it’s still smart to protect your site from 
some of the more well-known attacks. 

Keeping your WordPress installation, plug¬ 
ins, and themes up-to-date is one of the best 
security measures you can take. 

Using strong, secure passwords is your first line 
of defense against brute-force attacks—people 
or robots simply guessing your login information. 

Change the default admin username to 
something else, using phpMyAdmin or some 


other database management tool. 

Creating an additional authentication “realm” 

(or an .htacess password) in addition to your 
WordPress authentication can add an extra 
layer of protection between your dashboard 
login and rest of the world. 

Always back up your files. Even if you have the 
most secure installation available, things can still 
happen and data can be lost. 

Automate backups using a plug-in and store 
your backups off site (or “in the cloud”）for extra 
protection. 


l mds 
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Well, it sure looks fast, but I 
haven’t even seen it leave the 
driveway yet...! 


8 makfng wordpress ?ast 


♦Time for the passing lane* 


參 


0 


Speed is important online. 

A fast-loading site isn’t just about keeping visitors around. Yes, if your site doesn’t load 
quickly then people might just wander off, but a slow site also gets dinged in search 
results from the likes of Google, meaning fewer people will actually find your site in the 
first place. Beyond just increasing your horsepower, you’ll also learn how to use caching, 
database optimization, and additional hosting options to beef up your site to handle more 
traffic, too. 


this is a new chapter 
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now what? 


Not again... 

Just as things were starting to settle down, it looks like Thanks 
for Mutton is having some problems again. 
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Laura: Wait, how do you know how many people have been 
visiting the site? I thought the Feedburner stats only told us 
about our RSS feed subscriptions, not the visitors to the site 
overall. 

Mark: Oh yeah, I didn’t get that from Feedburner, I’m getting 
our site stats from Google. 

Bob: Google? OK, I know that Google does a lot of things, but 
how in the world does it know how many people are visiting our 
site? 

Mark: Well, you have to sign up for it as a service from Google, 
but when a visitor comes to Thanks for Mutton, our web server 
“logs” a whole bunch of information about that person. 

Laura: Information? What kind of information? Like their 
name and where they live? That seems a bit creepy... 

Mark: Not quite. We don’t know specifically which people come 
to the site, but we do know a whole bunch of useful stuff: what 
kind of computer/browser they are using, where in the world 
they live (their general area, not an address or the like), and how 
long they stayed on the site. 

Bob: Oh, that’s pretty cool. So we could even look at which 
pages they visit the most (or which ones people hardly visit at 
all)? 

Mark: Exactly. And not only does that allow us to help decide 
which content is most popular so we can plan future articles 
and videos, but it might also provide some clues about why the 
site isn’t showing up at all right now... 


Laura: Oh, I get it. If we look at traffic from before today, we 
typically have a couple hundred visitors a day, maybe close to a 
thousand max if we write a really popular article. But today we 
just had 15,000 visitors in 10 minutes. What could cause a spike 
like that? 





Think back to how your web server handles web page requests, and what it has to do to put 
together a WordPress page (you can also take a look at Chapter 1 again for a refresher). How 
do you think a sudden “spike” (or increase) in visitors to your site might affect the web server? 
Before we solve that mystery, let’s get Google Analytics rolling for Thanks for Mutton... 
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Keep m eye on your traffic with froogle Analytics 


Every time a user visits a page on your site, a whole host of information is made available to 
the web server about where that person came from, what type of computer and browser they 
use and how long they stayed on the site. This information is important in helping us figure out 
both who our audience is and what their technical requirements are, but it’s also super helpful 
in deciding and how much server space and power we need to handle the traffic. Google 
Analytics is a service that easily integrates into WordPress and will give us all the data we need 
about our site visitors. 


This is ou\r ddshboavd m 
^oojlc /Ualyfcds 
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*to ouv - si*tc ovcv - ^3s*t ^>0 dsys* l*t s like 
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Integrating &oogle Analytics with WordPress 


The only thing you need to do to get your site to work with Google Analytics is to add a small bit 
of JavaScript to the header of every page that you want tracked. This can be done by copying 
code that Google gives you to the header.php template file. To make things even easier, we’ll give 
you the code here and show you where to put it. 


③ 


Sign up for Google Analytics. 

You should already have a Google account from when you installed Feedburner. You can use the same 
login info to create an account at www.google.com/analytics. From there, add your WordPress site as a 
"Website Profile.” 



Copy/paste the tracking code. 

You can find your code in the u Profile Settings” page for your site. It is the same code that any other 
site would use to implement tracking, except it has a user ID specific to your site. We’ve provided the 
code below, and all you have to do is change the ID to match what Google gave you in your site profile. 



header.php 

<?php wp_head(); ?> 



^ e 败 y t 加 e a visits a page o, ou^ site. 


<script type="text/javascript"> 

var 一 gaq = 一 gaq | | [] ; " 

_gaq.push([ ' 一 setAccount,, 'UA-XXX A ]); 
gaq•push([' trackPageview^]); 


Replace this -text youv- ov/h 

usev (P. google uses this {p khow that 

1-t is -tvadkihg is associated with you^ 


(function() { 

var ga = document.createElement('script A ); ga.type = 'text/javascript A ; ga.async = 
true ; 


ga.src = ('https:' == document.location.protocol ? 'https : //ssl A : 'http://www') + 
'.google-analytics•com/ga.j s'; 


var s = document.getElementsByTagName('script A )[0]; s.parentNode.insertBefore(ga, 
s )； 


}) 0 ； 

</script> 

</head> 



/l/lakc suv-c *tKc dodc is pasted jus 七 above 
*tKc dlosm^ </Kcad> 
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the truth is out there 


Your site traffic has a lot to say... 

There’s a ton more we could get into about analyzing your site traffic, but for 
now we’re just going to step back and look at the bigger picture. A bird’s-eye 
view can help you spot interesting trends (hot topics as they start to emerge 
on your site), or significant trouble spots. 



... but it can't tell you everything 

Google Analytics is a great tool, but it’s not a mind reader. Once you’ve 
found some trends (or a big change) in your site traffic, you may need 
to use other tools or approaches to figure out what is causing the traffic 
changes on your site. This could include site surveys, customer research, 
and more. (Check out Head First Web Design for some great techniques to 
learn more about your site visitors). 


Look like it ? S time to start di 您 吨 … 
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I just did a quick Internet 
search, and found out that my 
paprika article made the front 
page of Digg. Sweet! Except 
that with the site down, now no 
one can read it... 


O 


o 


YouVe been Pugg 

Digg.com is a social news aggregation site where users submit stories that are then 
voted up or down by other members of the site. The most popular stories make it 
to the front page and are potentially seen by millions of people around the world 
(people call this getting “Dugg”). Sites featured on the home page could see 100s or 
even 1000s of page views per second —— traffic that could bring even the most well- 
prepared sites to their knees. 




Youv avtitlc yb oy\ *tKc Komc o( 
ar>d *tKousav>ds o-f vcadcv-s dlidk 
oy\ a l*mk *to youv si 七 e. 


I^iiially, -the scv-vc\r slows v/dy 
dovm, bu-t a-f-tev* a pvolo^gcd 
period heavy braU\c, ihc 

sev-vcv- y/ill cvc^-tually s-fcops 
ircspohdmj al-feogc'thcir. 






-► 




These v'is'i*ts dome 
ar>o*tKcv, 5*iv*m5 *tKc sc\rvc\r y>o 
bv-edk m *tKc adtioy>. 
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traffic jams 


The anatomy of a web page request 


In order to find ways to help Thanks for Mutton stand up to the heavy traffic of the Digg 
Effect (or any other rush of traffic to the site), we first need to look ever deeper into the 
details of what’s happening when someone types your site’s URL into the address bar of 
their web browser. 


£vcvy y/cb vc<\ucs*t s*tav-*b 
a usev a WRL 

*m*to *tKc bvov/sev. 


o 



a piede o( -the pv-odcss you have〆 七 
seen yet Bc-Povc a pajc cav\ be vc<\ucs-tcd 
-the web semvev, ihai URL y\ccds 
■to be t\ra^slaicd m-to a ov W |P 

3 ddv*css. This is -the job o-P the Wcb^s 
Domd'm Name Sys 七 erw (D/VS) 


scv-vcv-s. 


LJ 


DNS Server 


The IP dddmess provides mov-c 

spedi-f id m-Po {jo youv- web 
scirvev- The 七饮 m Address” is 
do’m 匕 ideMe. It’s like a 

spedi-fid house (or web pajc) 




Oy\U >wc Kavc ar> IP address, y/c 

da 的 -f md 七 he >wcb sewev av>d ask 
’.9 〜 ^ tKc 阿. 

。 S、' 




Web Browser Q 打 ; 



他 v e r u ^h 


a 


勿 ce 



^ut t{ 


°n/ 



Or\tt all -the fa^c is assembled, 

all *tKc da*t3 m rt ay>d PHP 

*m*tcv-pvc*tcd m*to HTML, rt yts 奶七 
badk *to *tKc dl*icy>Vs bv-oy/sc\r 1/VKo 
kw/ domfu*tcvs y/eve so fol*i*tc? 


Web Server 
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This is i\\c oi\\tr ficdc >wc hava ’ 七 
dovcvcd yc*t ： Apadhe is *tKc actual v/cb 
so^*tv/3v*c vurrnm^ on youv* Wbv*dPv"CS 
v/eb scv-vcv*. You da^ *thmk of rt as 七 he 
*tKa*t ky>oy/s y/Kcir> *to -f iv-c uf PUP 

pull -fvom *tKc c*t£- l*t ^Iso 

*m*tcv-pvcis *tKc Pl+P -f iles ar\d v-c*tu\nr>s 
actual >^eb pa^cs -to a tlic^Vs bv-oy/scv-. 


Hoot Di 

Inrorddl 

^00l«jp| 

Apache 





MySQL 




A 


Because WovdPv-css s-fcovcs 

its *m a MyS^L 

database, PttP will ^eed 
■to addess -the database ih 
ovdev- -to Complete -the p% 
v-c^ucsi by -the usev. 


t 


% 


,0 


/\padKc ky>oy/s *i*t is ybtm 泛 is a 
vc^ucst -fov* d Wov*dPv*css +ilc 3v>d 
-f ives up *tKc PHP so i*t ^3^ 

fvodcss *tKc pa^c- 




少 o; 


%• 


All this hapf ens m 

ymv web server... 


1001 

n\otoi 

00 J 01 

ioiont 

PHP 


Based on the the diagram above, identify three areas 
you think might be bottlenecks for a website slowdown 
or even a crash. Why those particular areas? 
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trouble makers 



*tKou^K PttP is v/cll-'m*tc5V-a*tcd *m*to ApaAA rt s 七 ill has *to s*ta\rt 
/ up a^A sKu*t doy/r> *tKc ?W? cadK ir，est Thu w add 

PHP / uf ovcv 1,000s Jc vc<\ucs*b pcv 

Web servers were built to serve static HTML files —— plain text documents 
that simply need to be returned to the browser. However, WordPress is 
written in PHP which needs to be processed and converted into HTML 
before it can be sent along. This takes time and although it’s still relatively 
fast, it’s not nearly as fast as just sending a plain old HTML file. 


MySQL database 

The database —— in our case, MySQL —— is another step in between 
turning PHP in HTML that can be sent back to the browser. Some of 
the pages in WordPress need content that’s stored in the database. In 
order to render the page correctly, PHP needs to talk to MySQL so 
that our post about the etymology of paprika shows in its entirety. 




HTTP Communication 

Finally, the last slow-down in our request chain is HTTP itself, or the protocol 
by which all this stuff works together. Depending on how many “assets” (images, 
media, scripts) need to be returned via an HTTP request, the browser may need 
to make several requests to several different web servers. This can also slow a site 
down if not watched carefully. 

I By default 你 os 七 koy/s^s y/'ill or>ly dovmload 七⑽ assets pev doma*m, you 

V have moire images your y/cb the 一 v/s 饮如 IU«d *to make multiple 

irc^ucsis bo -the scirvc^r C TKat tKcirC Will siari slow tW 少如會 … 


iiereiare no ^ 

Dumb Questi9ns 


OK ， isn’t there just a plug-in for 
the Google Analytics stuff? 

Yes, there’s a plug-in for this too... 
although a plug-in can be overkill for a 
simple service like Google Analytics. If you 
don’t wish to modify your theme, there are 
plenty of plug-ins that will automatically 
integrate WordPress with Google Analytics. 


For details about these plug-ins, look for 
Google Analytics at http://wordpress.org/ 
extend/plugins. 

Do I really have to worry about 
all this performance stuff? I just have a 
nice little site that not so many people 
visit every day... 


Well, you certainly don’t have to, but 
an ounce of web performance prevention is 
worth a pound of sleepless nights dealing 
with crashed servers. And you never know 
when your little niche site might become an 
overnight sensation. Aside from that, dealing 
with the potential performance trouble spots on 
your site in advance means it will run faster in 
general, which will be a nice thing for those 
select visitors that do come to your site. 
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WordPrcss performance checklist 

Obviously we’d like to have Thanks for Mutton be fast and efficient, but before we look at 
making it run even faster, let’s start by dealing with the things we need to do to keep our 
site from crashing when the next big blog post hits the front page of Digg. We’ll dig into 
(ha!) each of the checklist items below in more detail, and have the site humming along in 
no time. 


Caching 


Most WordPress pages, as we’ve seen, are served up “dynamically，” 
meaning WordPress assembles them from a variety of sources and use 
PHP to create an actual HTML page on demand. When we “cache’ 
page in WordPress, it stores the rendered HTML as a static (pre-built 
file and then serves that up on the next request —— this speeds up response 
times considerably, allowing our web server to handle more requests in a 
given period of time. 



database optimization 


Cv-catm^ s*ba*t*id HTA1L 
or>ly v/ay *to tacMt a pay- 1/Vcb 
scv*vcvs bv*oy/scv*s also Kavc 

bi/il 七 - m s 

book... 


Although caching is easy to implement in WordPress, at some point 
you’re going to have to talk to the database. Because of this, we 
shouldn’t neglect MySQL and we should do everything we can to make 
sure it’s running as fast as possible. 


Reduce server requests 

Another slow point in our request path is the time it takes your web 
browser to download all the images, scripts, and content to your 
computer for display. If we can limit the number of times the browser 
has to make a request, we can speed up our pages. 



Wc also bvm^ m some o*thcv* 
oY\[\y\t scvv'idcs *to Keif us s*tovc 
ay>d 父 w all *tKosc images and 

s*i*tc assets. 


The web server 

Finally, even if we have all the caching, database optimization, and 
limited requests in place our server could still be slow (and possibly 
crash). 



TKcsc scvvidcs av-C sometimes 

dalled w dloud w Kostm^. TKcy lc*t 
you add virtual sewev-s *to youv 
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plan ahead 


Speed up WordPrcss with caching 

One of the best ways to make WordPress more snappy and to save your server from being 
overworked by requests is to set up some form of caching. Caching is the process by which 
web servers and browsers keep a pre-rendered copy of a page handy so that the next time it’s 
requested it can be served immediately to the user — without having to talk to PHP, MySQL, or 
even the web server in some cases. 
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Ouv- 1 /Vov-dPv-css dadKc is \rcally jusi a d^cd*to\ry 
-full ttT/l/IL -f iles *tKa*t yi scirvcd *to d b\rov/sc\r 
*ms*tcad o-f v-cy>dcv-*m 5 *thc pa^c US” PUP 

dv>d /1/IyS^L. 


l-f -the vc<\ucs*tcd fa^c is *m 
-tKc dadKc, ApadKc simfly 
yabs rt d^d sc^ds i*t badk *to 
*tKc bvov/sv/cv. 



-► 


o 



o 


|-f *tKc bv*oy/scv* v*c^ucs*ts d 仏 a 七 

•is y\oi *m i\\t dadKc, ApadKc Kas *to 
build *i*t like ov\ ar>y o*tKcv \rc<\ucst 
Apadhc i\\tr\ adds -that pa^c *to *tKc 
dadKc, -too. 



Apache 


The goal of caching is to reduce the number of times that 
Apache has to fire up PHP and MySQL to handle a request. 
The more times that has to be done, the slower our site will be. 




PHP 
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cache on! 


0 


This is great and all, 
but why aren’t there 
any caching settings in 
WordPress? Shouldn^ this 
be on by default? 


0 



1/VP Supcv- CadKc is a 
bi*t move domflc% 七 
some o( 七 he o*tV>cv 
plu^-'ms y/C^vc bccir> 

usm^, bu 七 b^sid 

•ms*talla 七 I 。灼 pvodeduves 
avc still *tKc same- 



Start caching with the WP Super Cache plug - iw 

Unfortunately, the type of caching we need —— which is really just storing static HTML 
files —— isn’t handled by WordPress out-of-the-box. So, like most other add-on features we 
find ourselves using a plug-in. In this case, the best option is the WP Super Cache plug-in. 
It handles creating all the static files, setting up the caching process, and even some extra 
goodies that will make our site even faster. 



二 d t 
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WP-Supcr Cache turns your blog into a bunch of HTML files 


Don’t worry! This is a good thing. HTML files are what web servers 
were built to serve —— and serve fast! WP Super Cache does the work for 



(I^P Supcv- CbcMc gives us -fco^s 
、 dashed -Piles si-tc 
ov\ -this wc mstall 


Install WP-Super Cache (http://wordpress.org/extend/plugins/wp-super-cache/) just like you have 
with other plug-ins throughout the book. 


\OY\S 


ov-mahcc 


tcoi 


UfDfO 

OOJOl 


Apache, saving an HTML version of a page on your blog the first time it’s 
requested by a user. Any requests that come in for that same page later on 
will be quickly served the HTML file without loading PHP or making a 
connection to a database —— both of which increase page load time. 


Web Server 


Apache 


Scvv'm^ dadKcd -f iles 
tdiY\ be -fas*tcv 
七 ha 灼 s*tair>davd 

1/VovdPvcss sc*tuf. 


Cache 


WT T Supvr Cm'h e Mu rmger 


WP S4ip«r CUllC! SCBlli i 


Q Qftf W LadNi ukI SufKi C»ch4 cr4bkif 

Q HJiUF ON SufKr CaiJic only It^acv iW Cfccht cicNrq, 

M (HPf 1 kM 1 C^thiP jixtd ^upii CiLthi diiiiliiKi 


□ Dwi'l €Hh4 DlfrCI 

□ Prckiijip ni 9-hc iwU _ 


□ Qcm all udii 
stvii^g isrl p»ii：i 


h ni The iktU > 
ill lhJh niti wh 


hm^cEl m uun 

YViif iirvrr n Qgfi p>mh^ LfAKii j _ _f btogs's- fMiin 


in pvMi^kL wv ■ 明 fiLMdY 


^ CKM Ithrikl. ScA Il 4 Hi mm% i Wr Wf ll iKing 

gcncmriL ij% 4 mnicrKltd f^r my biis^ Mbsiitii km wnmrmi ftijiri ； ""dfOTy 
birttE' and itkmIc’ 油 各他.】 

□ Cpirii _ e Wd din 邮 _ bj¥ Nip rl wji ufftM 

uadnpHVTFd U'tfnmql Mj 卜 fjyjLF j^bT urmr lii i^p i!h irn^y ^jr# fjppi 1 


□ im 




Unbli lyppsfl u%in| 


t tv ^ 


s|KhUy+ |p nm ^ti ^uu _1h fjudl^nJ 
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1 1jn -' 8 1 p 1 IvfJvul^iflrnraik viHriibliP b> IFh wt&iftwi 1 IhR feln 

php jnd cjji tn ^talirlnd JirSirriin ^-n 

fiiM mw r^m ib cimliihlif m p»d _iMI 
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exercise solution 



Install WP Super Cache (http://wordpress.org/extend/plugins/wp-super-cache/) just like you have 
with other plug-ins throughout the book. 



Install the plug-in. 

WP Super Cache installs just like any other WordPress plug-in —— use the Add 
New plug-in feature in the Dashboard or download and install the files manually. 




plug-ins 


Rcrwcrwbcv-, i-f youVc ^o-t 
lAS’mj 七 he Add New plug - m 
•PeaWe, all pluj-ms go 
•m 七 he / plujms div-ediov-y 

•mside /wp-do 灼七伙七 . 




Enable and configure. 

Makes sure you enable the plug-in from the dashboard 
plug-in menu. Don’t worry if you see a disabled 
warning~we’ll take care of that in a minute. 


Or\tt you activate *tKc 

you v/'ill see y/Ka*t looks like an 

CV*v*ov—*tKis is just you 

i\\ai 1/VP Supcv- CadKc r>ccds *to 
be *tuv-y>cd oy\ b> stairt v/ov-km^.. 
(Wc k 灼。 y/, w ad*t*iva*tm5 W should do 

*tKa*t so its a b*rt >wciv-d .) 


_ WP Super Ciche 

Aaivaie ! Deleie 


Vf ry fn^.r r^rhinjj plugin fnr WfirfiPfF^^. 

Vtr^iun 0.9.9 | By DunriLli-d. O Cd.uiiiih \ Vbil pluyin 



Manage Plugins (姻 咖 


WT 1 Super Cache is disabled, rkase go ta the p<ygin admin page to enable caching. 


Plugin activated, 
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⑩ Start the plug-in. 

Turn on WP Super Cache to make sure everything is running properly. 
If all is well, you should see a message to update your .htaccess file. 



MnniLiJl v|ing fhv UEFTPlj^ ir rSt 置。 riLpsi ciiwIniirL UHlpd ±vy liy plugin rPfpji 
Hfp fttr anmnirllavn nn iBJnfaijJtlkiq Hi ， 梅 |[M_I 


y\ 



Dont forget about .htaccess rules. 

Click “Update Mod_Rewrite Rules” at the bottom of the long yellow 



TV^is button v/ill y/\r'i*tc V»*ta6dcss 
(or you-i-f it hils you 乙孙 always 30 

m a^d add rules yourself TV^c 
mstallatio^ docs y/»ll V^clf W httf:// 

y/ov-dfv-cssov^ / c%*tcr\d/pl—ns/wf 一 

SuPCV*- - £- 3 C-V^c/>^S , t 3 ll 3 'tioir\/* 
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very cachey 



Caching speeds up pages because the web server has to 
do less work for each request. When we cache a page in 
WordPress, it stores the rendered HTML as a file and 
then serves that file up on the next request — speeding up 
response time considerably and allowing our web server 
to handle more requests in a given period of time. 
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Pow't forget about your database 

Even though we have caching enabled with WP Super Cache, our database is still going to 
get used on a daily basis. Not all our content is cached and some data, especially for items in 
the dashboard and pertaining to comments, is not cached at all. In these cases, we want to 
make sure that our database is running at optimal performance. And guess what? Another 
plug-in to the rescue! 


Optimize your worapress database 





l/VP -^ 七 w 以丨 s a WordPress 

op 七 Wiz_a*bcm fluj-m 七 1 ^七 will 
help us keep ouv 
•m OfioA v/ov-k'mj o\rdc\r. You C^y\ 
diov/)r\loddi iK\S*b3ll *tKis 
•m Jpv-om ： httf://v/ordfv-css.orj/ 
C%*tc\r\d/plujms/ 


槪 Dashboard ▼ 


Dashboard 


3pdiu Sjve 

Updates 

WP-Optimize 


AFreiidy Of 

0 Kb 


AKraidy Uptmiized 

U Kb 


Alnsidy Optimized 

U Kb 

j 

N€^d to UpT!m4ze 

U.uab Kb 

The l/VP-OptlirwiZjC \n\Cm J 

rwijlvt be havd "to -Pmd 

flfr^.idv t iptim i7Mi 

<1 Kh 

AErpariy n|>Tlm Itt rt 

n Kh 

initially. They vc siudk i 七 
u^dcv-^caih -the u Updaics w 
option *m 七 he ma'm 

D^shbo^vd meirtu- 

ftEr^iriy OpfTSml7*Ml 

n Kb 

AEreadv omfim^zeti 

0 Kb 

AtrtCiiilv OtFiirriii£t：il 

D Kb 


Alrudv OfAimifed 

0 Kb 


Alrt ： 4dv OtfLEmized 

0 Kb 


iEJiriK 





小 



IjVP-Op-timiic Checks ouv /WyS^L tables io see i*f i-t cav\ 
Wtt up a^y spa^c- This may r\oi seem like a big 
⑽ w, k 七 o^u you jet a -Pew lOO pos-b av\d 1,000s o( 
don_e>vU -these tables cav\ become ^ui-tc b^e. 
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Optimization Options 

The top half of the plug-in admin screen gives 
you options for what will happen when you 
click the “Process” button. The last checkbox 
will optimize our database but there are other 
options as well, including a way to clear out 
post revisions (WordPress saves a snapshot of 
your post every time you save or publish). 


Cpllpni- 

― hmimv oil hgiiJ Hiwhiiini 

4pp#«i miud^vi h vw ■■rpvtfjj 

—=UtAn miri+<l bfHrB lommtfiii 

Nq kurfi EHvnirti Muntf* 

Ma idnHHiBr|ia rpniHi 

L OfrilwJl loMi I 

Securny ImU 


Fight post revision bloat 


>0Mu«niarw 



r»Min WF^tuLmde ； 

<11， 

fad h^d 神 nsf^ 


Every time you create a new post or page, WordPress creates a 
“revision” file for it. If you tend to go back and edit/revise your posts, 
or your posts are just generally longer to begin with, those revision files 
can add up fast, and make your database sloooow. 


"this plug—v/ov*ks div-e 匕七 ly 
>/’_ 七 h youv da-tabasc, you cav\ also 

previously had -to do m PHP/^yA “ 




Y°^d expert -thcv-c -fco be only oy\c 
•file pev pos-t o\r pajc tha-t you Cvcaic, 
bu 七 cvevy smjlc -time you edii oy 

*rt, 1/VbvdPv-css saves Vcvisio ^ ，； 
topics o( -the -file- 



IA/P Op-tirwizjC \rcrwovcs old revision 
■files, ^ives you options *feo 


V*Crwovc sp^irw and u^—3pp\rovcd 
-Pvoirh youv- database 

■fcoo. 
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Database Report 

WP-Optimize tells us if our database tables need to be optimized. Tables needing work will be flagged 
in red and will also show how much space can be saved by optimization. It’s beyond the scope of this 
book to go into how it does this, but if we run the “Optimize database tables” option, we should see an 
entire table full of “Already Optimized” statuses. Everything may look good now, but after you start to 
get a lot of posts and comments, these tables can become large and optimization will result in more 
space being saved. So be sure to return to this option after your site has been running for a few months. 




database optimization 

Although caching is easy to implement in WordPress, at some 
point you’re going to have to talk to the database. Because of 
this, we shouldn’t neglect MySQL and we should do everything 
we can do make sure it’s running as fast as possible. 
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R U slow? 


Check performance issues with YSlow 

Now that we have WP Super Cache saving the HTML files of our site pages to serve them 
quicker, we can check out what other aspects of our site might be slowing it down. There 
are plenty of tools out there to check the performance of web pages in a browser, one of 
the best being YSlow. YSlow is a Yahoo tool that can check everything from load times to 
HTTP requests and report back where the slow areas on your site are. 
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b _ tmr llv 

•i fl hi PiS r|v 
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■.tarwuniv mM Iw f |K •Mmw 81 n- Jb nu |r-mq nrf* 

■ "Pfi TBL^i^m ■ 

H "hr 3 %Ki r ' Ufai * J 

0 HBiVp ^ 

J Thpf ^>tekf f i t Ig W^jjiB ■ jl 
I ol » - z-fcum- 


-Pov- Fiv-c-Po^—i-t^s like youv- 
WovdPv-css plug-ms, jusi -Pov d 
b\rowsc\r msicad/ Ov\U mstalled, 
i 七 jives you detailed siic 
m-Povirwa-tio^ io help uK>dcvs-ta^d 
whidh ov\ youv - si-tc avc 

woirkmj well, and whidh ave〆 七 
so hot.. 



ysloy/ also pvodu 以 s a vefovt 
davd J so\rts ou*tlmn^5 *tKc 
av-cas o-f s*i*tc pcv-fovmav>dc 
*tKa*t r>ccd *imfV-ovcmCy>*t. 
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h addition {jo -the si-tc v-cpov-t dav-d, 
/Slow jives you drtailed hs oy\ 
how lo^j HTTP \rc«\ucs-b take -fov 
yoiAV a^d ir>o^-dadhcd pa^es. 




YSlow also requires the Firebug 
extension for Firefox. 


You’ll have to use Fire fox in order to run 
YSlow, and before you do that, you’ll need 
to install the Firebug extension as well. 




Install Firebug and YSlow in Firefox and check http://thanksformutton.com to see how it does 
on the YSlow test. Firebug can be installed at http://getfirebug.com/and then YSlow can be 
installed at https://addons.mozilla.org/en-US/firefox/addon/5369/. 
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exercise solution 



EjceRciSe 
SotvtlOH 


Install Firebug and YSlow in Firefox and check http://thanksformutton.com to see how it does on 
the YSlow test. Firebug can be installed at http://getfirebug.com/and YSlow can be installed at 
https://addons. mozilla. org/en-US/firefox/addon/5369/. 


③ Install Firebug 

YSlow is a plug-in for the Firebug Firefox plug-in. You need to install 
Firebug before YSlow will work with the browser. 




W\\cy\ you navigate bo -the Fiv-cbug 
sitt m Fiv-c-Po^ you miiia-tc "the 
ms'tall -Pv-om y/i-tVm the bvowsev 
w’mdow. Ot\tt i^s mstalled i 七 may 
灼 ccd "to \rcs-ta\rt youv bvowsev- -to 
become active. 


❺ Install YSlow 

YSlow installs just like Firebug — once it’s set up you can 
start profiling site performance. 





YSlow 


/ 


[You should see a Y^Slow a^d Fiv-c 
、 \Coy\ m *thc status ba\r Jc Pivc-fo 
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⑽七 jomj -to be happy aboui -this/ 


What? How can we have a 
bad grade for something 
we don’t even know about? 
Just what is a Content 
Delivery Network anyhow? 



So much for being class valedictorian... 
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spread the server love 


Cowtcwt Pdivcry Networks give your web server a break 

A content delivery network (or CDN) is a global network of servers that serve static files, 

(images, stylesheets, scripts, video, etc.) on the Web. They remove the responsibility of 
serving static files from your cache on the web server. A big hindrance to your site’s speed is 
the number of requests the browser has to make for assets (images, zip files, etc) on a page. If 
there’s more than two per page, your browser is going to have to go back to the web server 
for each additional asset, and that slows everything down. 


Bv*oy/scv*s C ， 3v\ oy>ly 七 v/o assc*ts pev 

domd'rn (o\T HTTP request Usm^ a 

CPN alloy/s *tKc bvov/sev *to download -f iles 
-fvom mu Itiplc souvdes 七 he same time. 





Browser requests files 
from the CDN 

When the browser gets the 
original file, it then gathers 
the assets (images, etc.) from 
all the CDN servers 






CPN - 1 


Bvoy/scvs pull doy>*tcy>*t -fvom *tKc CPN 

mrbal HTML dodumcir>*t 

•is -fv-om i\\t v/cb scirvcv 

(o*tV>cv*v/'isc i*t docs^*t ky>ov/ v/Kat 
assets *i*t should be % 七七 ” -Pv-om *tKc 
scv-vcv-s). |*t cav\ also \rc<\ucst -f lics 
-fvom mu Itiplc CPN sc\rvc\rs a*t 
sdme time, v/K'idK speeds i\\\Y\^s up 
sio^i*fidairrtby. 
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CPNs syy>d youv daia -fv-om a dcy>*tval s-tova^c 
area av\d make 七 hem available y/ov-ldv/*idc. 

CPN - 2 


CPN -多 




rm 1 irr\r^ 

olio 


nvi' I rr 


Web Server 


Apache processes the request 

Apache (on the web server) gets the 
request and sends back only the HTML 
to the browser. 


Because CPNs avc loda-tcd all ovcv *tKc 
^lobe, *tKcy sewe *tKc -file -fvom *tKc doses 七 
lodatior^ *to *tKc \rc<\ucst You 6Sv) *th*mk of 
*tV>cm as massively d'is*t\r*ibu*tcd dadKc—*iVs 
somctK'mg people of*tcr> vc-Pcv b> as 七 
w dloud. W 


loaTbi 

uiarddl 

ooioiol 

ioiontj 

— 一 

Apache 


iVKc^ us'm^ a CPN, ApadKc or>ly Kas 
-to pvodcss *tKc mi 七 ial pay vc^ucst 
f[\\ s*tatid assets art sewed -fv-om -the 


CPN sev-vevs. 
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the amazon cloud 


Float around m the Amazon cloud 


Amazon Web Services (AWS) is a suite of hosting services designed for people who 
build websites and web applications on the Internet. The services include S3, a web- 
based storage solution that we learned about in the previous chapter, EC2, a cloud 
computing “platform,” and GloudFront, a content delivery network built on top 
of the 3S service. Such hosting platforms have become known as “cloud” services, 
because they often comprise tens of thousands of individual computers, connected 
together to share resources. Oftentimes your data is duplicated across hundreds of 
machines —— or in our case “floating” in the cloud. 



> SZ av\A CloudFv-o^-t >wovk -toythcv- 
-to dv-ca*tc a -fast, globally disVibu-tcd 

y>C*tv/ovk of scwcv-s -fov- youv do 灼 



WcVc y>o*t us*m^ *i*t 
Kcvc, bu 七 *th*mk o( 

6C2- as a >way b> v-cr>*t 

or\ 3 sufCV* 

domfu*tcv*. Y^u vuy> 
pvoblcms, solve 
*tKc dv'is'is, or 

\us 七 build a >wcb sevvev-. 







EC2 



Amazon’s web 
services aren’t free 

Although creating an AWS 
account is free, using 
services like S3 and 


CloudFront are not Make sure you 
check out the pricing before you start 
using the service. Also, because this is 
a hosting-related service, check out your 
current web host’s services to see if they 
offer a CDN as well-many do. Finally, if 
your looking for a free solution, try Coral 


CDN. Coral is a free CDN that is simple 
to use. 
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Amazon CloudFrowt CPN 

Amazon’s GloudFront works just like any other CDN except all your files are pulled from their 
S3 service (remember, that’s where we’re storing our backups). You simply upload your wp- 
content folder to your S3 storage and then setup a CDN distribution with CloudFront. Within 
minutes your static files are around the world and ready for browser requests. 



S3 



TKc CloudFv-oy>*t system yb 

*i*ts -files -fvom s*tova^C- 






l/Vkh a visiW makes a 
■to Ohc O-P ou\r pages, -the CVH 
ddivcvs -the images a^d static 
•files -P\rowr» a server closest -to 
thci\r lo^at'u 


lOh. 



Gee| 



Using a content delivery network may seem like a lot of work for a small performance gain-but 
having a fast site can make it easier for people to find you. Search engines like Google take load 
times into consideration when deciding where to rank your page. The closer you can get to the first 
page of results in a search the more people will find your site. And then you will be happy you made 
all these great performance enhancements! It’a a very non-vicious cycle... 
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put your files in the cloud 

Link Amazon S? and CloudFrowt to complete the CPN 


If you don’t already have one, sign up for an AWS account at http://aws. 
amazon.com. You’ll also need to activate the S3 and GloudFront service 
once your account is set up and ready. 


Access keys and secret keys are your username and password for the S3 
storage system. We’ll use these to get our files uploaded to Amazon. 


Make sure you create at least one access key 


O Sign up for AWS and activate S3 and CloudFront 


Account 

Account Activity 
Usage Reports 

Security Credentials 

Personal Information 


-f md youv ^cys 

\AV\dtr i\\t Scduv-*i*ty Credentials 
m ⑶ u m youv addouir>*t- 
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[Si X rm 
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O Connect to S3. 



Use an FTP client that supports S3 to connect to the service. Once 
you’ve authenticated you can move files to and from your S3 storage just 
like you do with the web server. 



f l-P you Ao^i Kavc a>r> FTP dierrt 
that suppovis Si, you cav\ 
use Fivc-fo% ov^air>*iz^v 

/ addo^s.mozallaov^ / c 的一 

US/-fivc-fo%/addoy>/^Z^"7/)- 


Add a bucket for the Thanks for Mutton CDN. 

Just as we did for our S3 backup last chapter, we need a separate bucket 
for our GloudFront CDN. 


拉 than ksform u titon - c d n 
than ksform u lEon -wp 
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an even distribution 


distribute your site's files 


O Open your AWS console. 

The AWS console is where you can control all of your services through Amazon. 
Once you create a distribution, you can manage and monitor it through this 


screen. 


EC2 


E Ini 
HdpRMijKcr 


Am-axon 

ClaudFront 


Afnd£tm RDS 


Q %YMm 




SfWIil-IA i? 
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袋 OiMl# Dflkrfeufian 


❺ Create a new distribution. 

Click “Create Distribution” and select your CDN bucket as the origin. Leave the 
other options in the default state. Think of a distribution as a little web server in 
the cloud that serves up all your images and scripts stored on S3. 


Creata Distribution 
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Finish the distribution. 

You should see the status of your distribution once its created. Here you can 
enable and disable it and modify settings. Make note of the domain name as we’ll 
need that for our WordPress plug-in momentarily (oh yes, another plug-in!). 



•IT rtM — i.% inm^j^nlsw rt" v* Enitripd ifr 1T_ CD 翏 


d2bamj0baaboh v .c loudfront, net 


TKis is ouv - r\t^ CDN URL -fov* dll o( 
Thay>b -fov- /l/Iut-to^^s sta 七 id -f iles. 


Upload wp-content to S3. 

Using an FTP client that supports S3 or the Firefox organizer plug-in, upload your 
whole wp-content directory to Amazon. 



than ksformullo n-cd 


■content 


■H 
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fire up your cloud 

Using the CPN in WordPress 

To use the GloudFront CDN with WordPress, we need to use our special CDN URL to 
retrieve the files. Depending on how customized your theme is, you may want to add 
this manually. If you’re using a default theme or a theme from the gallery, you can use 
a CDN plug-in like My CDN to change those links automatically (don’t worry, because 
we’re using caching, adding this plug-in won’t harm the performance of our site). 




My CDN URL Settings 


tf ytiu nnuriFrnnt. ymj r^n r^Acf tfijc nm rn hplp nfflniirllingi ^mur ^larir fibs 
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This is -tKc / 1 /ly CPN mCy>u-Kc\rC 
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<link re1= M stylesheet n type="text/css" media= M all M href= n http :// 
d2bamjObaabohy.cloudfront.net/wp-content/themes/twentyten/style.css" / > 


|-f you v'icv/ 七 he souvdc o-f TV>3v>ks -fov* J 

you should see i\\t CPN pa*tK / 

•m Imk m head o( HTA1L. 

Reduce server requests 

Another slow point in our request path is the time it takes your 
web browser to download all the image, scripts, and content to 
your computer for display. If we can limit the number of times 
the browser has to make a request, we can speed up our pages. 


□ The web scrvcr(s) 


Finally, even if we have all the caching, database optimization, 
and limited requests in place, our server could still be slow 
(and possibly crash). Depending on your hosting, your 
physical server just may not be powerful enough to handle 
your site traffic and no amount of tweaking will change that. 



a CPN Keifs -take some o( \obA 

o-p-f youv sewevs, bu*t cvc^ move 

vobus*t dloud Kos*tm^ options dVd'lldble. 
ou*t -rov* move m-fo oy\ 
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a successful site 
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Your Theme Toolbox 

You’ve got Chapter 8 under 
your belt and now you’ve 
added a high-performance, 
super fast WordPress site to your 


tool box. 


■ Because WordPress is powered by PHP and 
MySQL, the web server sometimes has to do 
a lot of work to keep up with the requests. This 
can often slow down your site. 

■ Having a slow site can hurt your rankings 
on search engines and can be a bad user 
experience for your visitors. 

■ Caching is one way you can take some of the 
workload off your web server. Cached files 
don’t require the web server to talk to PHP and 
MySQL to deliver a page. Instead, they are 
served like any other HTML file. 


■ Use a plug-in like WP Super Cache to 
automatically control the caching of pages within 
WordPress. 

■ YSlow and Firebug can help you determine what 
areas of optimization you should focus on. Every 
site has different needs. 

■ Use a content delivery network (CDN) to serve 
your static files to visitors. This will cut down on 
the amount of requests your web server has to 
make and speed up the load time of the site. 
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the end 





Wouldn’t it be dreamy if 
this were the end of the 
book? If there were no bullet 
points or exercises or PHP 
files? But thafs probably just 
a fantasy... 




Congratulations! 

You made ittoAe end. 

Of course, there’s still an appendix. 
And the index. 

And then there’s the website... 
There’s no escape, really. 


310 


Chapter 8 


appendix ： leftovers 




The Top Ten Things ♦ 
(we didn 9 t cover) 



We’ve really covered a lot of ground in this book. 

The thing is, there are some important topics and tidbits that didn’t quite fit into any of the 
previous chapters. We feel pretty strongly about this, and think that if we didn’t at least 
cover them in passing, we’d be doing you a disservice. That’s where this chapter comes 
into the picture. Well, it’s not really a chapter, it’s more like an appendix (OK, it is an 
appendix). But it’s an awesome appendix of the top ten best bits that we couldn’t let you 
go without. 


this is a new chapter 
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comments and spam 


O Managing comments 

Comments are an essential part of any online community or blog and WordPress 
makes it easy manage reader comments and deal with spam (unwanted comments 
often come from “bots” as well). Depending on your settings, comments are either 
automatically posted to your blog (unless they are spam) or held for moderation, which 
requires the site administrator to approve the comment before it gets posted on the 
live site. 



OoimimCy)'ts £，ciy\ be 

"the imciruA oy 

^uitkly handled -fv-oirw -the ma’m 
dashboard 问 e. \ 
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❺ Migrating from WordPrcss.com 

One powerful feature of WordPress is its ability to import 
and migrate content (and much more) from other blogging 
platorms — including WordPress.com. WordPress.com is 
a “hosted” version of WordPress, similar to Blogger, that 
allows users to sign up and create a free blog online. You 
have a similar interface to the downloaded version of 
WordPress and your own URL, but it’s on the WordPress 
domain, Y\k^yourblog.wordpress.com. If you want to do custom 
themes, create your own plug-ins, and start working more 
with PHP, you’re going to outgrow the hosted service 
eventually. And once you do, you can export all your 
content and import it into your own WordPress installation, 
preserving posts, pages, settings and comments. 
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WordPress 


Install the WordPress. importer to import postq 
tags from a WordPress. export file. 


Howdy! Upload your WordPress extended RSS (WXR) file and we'll import th€ 
posts, pages, com merits, custom fields, categories, and tags into this site. 

匚 ho os e a WordPress WXR fiile to yptoad, then click Upload file and import 


Choose a file from your computer: (Maximum size: ZMB) 
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more themes 


O Theme Library 


We briefly mentioned the theme library erlier in the book, and it functions just like 
the plug-in library within WordPress. The concept is simple: designers build themes 
that work withim the WordPress system and make them available for free in the library. 
You can browse and download themes from the website or browse and install themes 
from the WordPress dashboard just like plug-ins. All the themes available in the library 
are free to use and are a great way to quickly change the look and feel of your site. In 
addition to the free themes, there are also high-quality commercial themes (at a cost) 
that are available outside the theme library. 
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O Theme Editor 


WordPress gives you the option to edit your theme files and templates 
from within the dashboard. Here you can modify your own themes or 
make changes to an existing theme you’ve downloaded. It’s a good 
idea to make a backup of the original theme before you start making 
changes just in case things don’t go as planned. The easiset way to do 
this is to dupliate and rename the theme in your wp-content/themes/ 
directory. 


SO Edit Themes 
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master of your domain 


Q WordPrcss MU (multi-user) 

With the release of WordPress 3, the WordPress 
MU project is now incorporated directly into 
WordPress (it used to be a separate installation). 

This multi-site feature in WordPress 3 allows 
you to create a network of blogs under a 
common domain. For example, we could 


create the Thanks for Mutton nextwork 
where all of our users could have blogs 
under the thanksformutton.com domain (bob. 
thanksfor mutton. com, j^/Cthanksfor mutton, 
com). What you’re doing is basically creating 
a mini version of the hosted Wordpress.com 
service for your own authors. 
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O PuddyPress social networking plug-in 

BuddyPress is a large plug-in that transforms WordPress into an out- 
of-the-box social networking site. The addition of BuddyPress gives 
your visitors features like a public profile, friend news feed, messaging, 
microblogging, and groups. In addition, all the blogging features of 
WordPress work as well. This is a great plug-in if you’re looking to 
implement your own personal social network for a group of friends, a 
book club, or even an office intranet. For more information, check out 
BuddyPress on the Web at http://buddypress.org 
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PHP 


O PHP 


As you learned earlier, PHP (or PHP Hypertext Preprocessor), is an open 
source scripting language used in web development to create dynamic web 
pages. WordPress is built primarily with PHP and so are the plug-ins and 
themes that work along side it. You’ll be able to extend the functionality of 
your site significantly if you start working with PHP. If, for example, you 
want to have different sidebars show up depending on which page someone 
is viewing, or (as we did in Chapter 3) make your main home page appear 
different from the rest of the site, you’ll need to get more familiar with PHP. 



homepage.php template file 


todc wc used m Chap*tc\r ?>. you use PttP 扣 HTML 

-file, dll PttP todt -falls v/rth’m <?php ?> *tajs By\A -file *to 
have a php so web scv-vc\r k^ows *bo pv-odcss dodc. 
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<?php 

/* Template Name : Homepage * 

?> 

<?php get—header(); ?> 

<div id= 〃 content 〃 class= 〃 wrap〃> 

<ul id= 〃 products〃> 

<li><p class=’’bit-l6’’>16</p></li> 

<li class=’’center’’><p class=’’bit-32’’>32</p></li> 

<li><p class=’’bit-64’’>64</p></li> 

</ul> 

<ul id= 〃 descriptions〃> 

<li><p><strong>l6 Bits</strong> Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris.</p></li> 

</ul> 

</div> 

<?php get footer(); ?> 

a _ 


TKc ^c*t__foo-tcv-0 

ad*tually *msc\rb 
*tKc doy>*tcy>*t o( -the 
-footcv-.pKp -f lic *m*to 七 he 
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Head First PHP & MySQL is a great way to get started 

with PHP. 、 


From there, you can also check out the PHP home 
page at http://php.net/index.php and the W3C 
Schools tutorials: http://www.w3schools.com/php/default.asp. 


318 appendix 













leftovers 


Q Cloud Hosting 

Cloud hosting is a term used to describe a type of virtual server technology that allows a 
website to use a pool of resources (hard disk space, processors, and memory) to help run their 
site, and also expand that pool of resources when the need arises. Before the advent of cloud 
hosting, scaling a website involved adding new physical hardware to a system to handle the 
load. Today, that can be done simple by allocating more resources to a particular cloud server 
without adding hardware. Another feature of these services is that they can be purchased by 
the hour, giving you the freedom to test and build without committing to months of service 
and long contracts. 
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going mobile 


O Mobile WordPress 

With the advent of smartphones like the iPhone and 
Android handsets, mobile browsing and interaction 
with websites have become an important part of 
everyday life on the Internet. WordPress has many 
different options for integrating with mobile devices 
from a dedicated iPhone application that allows 
you to manage your blog from your phone, to 
plug-ins that optimize your site for viewing on the 
small screen of a mobile device. With the mobile 
space getting larger by the day, making your content 
accessible to smartphones isn’t somthing to be 
overlooked any longer. 
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© Search engine optimization (SEO) 

Most of the time, visitors don’t get to your site by typing a URL in to their browser 
windows. Instead, the visit a search engine like Google or Yahoo and search for a topic 
or phrase related to what they are looking for. Sometimes, they will even just type 
your name or the name of your blog in to a search engine in the hope that it comes 
up on the first page of results. And of course, you’d like to be there. Search engine 
optimization, also known as SEO, makes sure you are doing all you can to get your site 
and pages showing up in relevant search results. SEO has recieved a bit of a bad rap 
recently because of the proliferation of companies and people claiming to be “SEO 
experts” or guaranteeing “first page results” for specific keywords. These firms often 
use tricks to try and game the system and spam services to try and get your content 
on as many sites as possible. True, effective SEO starts with great content, and a well- 
designed, fast-running site. 


Quick and dirty SEO checklist 


Use the pretty permalink feature in WordPress so that your URLs carry 
more meaning with the inclusion of post and category titles. 

Write good content. This is one of the most important things you can 
do. Write things that people want to read and that are relavent to the 
topic of your site—this includes page and posts titles. 

Use a well-designed theme that uses proper “semantic” markup like 
〈 strong 〉， <em> and heading levels that are relevant to content (e.g .， 
only one <hl> per page). See Head First HTML with CSS & XHTML for 
more on this. 

Makes sure your page loads quickly. Use Google Webmaster Tools 
(and YSlow) to monitor the speed and performance of your site to 
make sure slow load times aren’t hurting your search performance. 


Of course, there is a plug-in that 
can help you with some basic SEO. 

Search the WordPress plug-in directory 
for “SEO.” You should find a few 
options to help you with basics like page titles, meta tags, 
and avoiding content duplication. 
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